javascript 在单击按钮上动态创建文本框，并更改选定文本框的 css 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21862309/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically create textbox on click button, and change it's css properties for selected textbox
提问by user3304886
Thanks once again,for all great mind's.
再次感谢所有伟大的头脑。
My expectation is exactly what the they have in example site.
我的期望正是他们在示例站点中所拥有的。
example site: http://www.printvenue.com/customer-design/editor/rounded-corner-business-cards/3-0128-vc-psd
示例站点：http: //www.printvenue.com/customer-design/editor/rounded-corner-business-cards/3-0128-vc-psd
--->creating text box dynamically onclick in CANVAS area only.
--->仅在 CANVAS 区域中动态创建文本框。
--->text box input text's font,font size,color .. changed by getting id var somename = document.getelementbyid("id of textbox -in this case id getting uniquely"); somename = here all function for changing color, font are follows
---> 文本框输入文本的字体、字体大小、颜色 .. 通过获取 id var somename = document.getelementbyid("文本框的 id - 在这种情况下 id 变得唯一"); somename = 这里所有改变颜色的函数，字体如下
but,
但，
my problem is to add text box dynamically onclick button,so how to assing id for var somename = document.getelementbyid("id of textbox(dynamically created text box id)");
我的问题是在点击按钮上动态添加文本框，那么如何为 var somename = document.getelementbyid("文本框的 id(动态创建的文本框 id)");
At the same time that text box should be movable any were in canvas.
同时该文本框应该是可移动的，任何在画布中。
回答by Hoedje
You can create a new HTML element like this:
您可以像这样创建一个新的 HTML 元素：
var textBox = document.createElement("textarea");
To add it to the parent use
要将其添加到父级使用
document.getElementById([insert id of parent here]).appendChild(textBox);
This parent should be the div/html-element in which all the textareas are located.
这个父元素应该是所有文本区域所在的 div/html 元素。
HTML
HTML
<div id='parent'>
<textarea>txt1</textarea>
<textarea>txt2</textarea>
<textarea>txt3</textarea>
</div>
<button onClick="addBox()">add textarea</button>
JS
JS
addBox = function(){
var textBox = document.createElement("textarea");
document.getElementById("parent").appendChild(textBox);
}
Example in JSFiddle with JQuery
HTML
HTML
<div id='parent'>
<textarea>txt1</textarea>
<textarea>txt2</textarea>
<textarea>txt3</textarea>
</div>
<button>add textarea</button>
jQuery
jQuery
$(function(){
$('button').on('click', function(){
var textBox = document.createElement("textarea");
$('#parent').append(textBox);
});
});
回答by ashbuilds
Here the linkthat you wanted :
这里link是你想要的：
HTML
HTML
<input id='inp' type='button' value='Click me'/>
<div id='cont'>
</div>
JavaScript
JavaScript
document.getElementById('inp').addEventListener('click', function () {
var textarea = document.createElement('textarea');
textarea.className="mytextbox";
document.getElementById('cont').appendChild(textarea);
});
Css
css
.mytextbox{
width:200px;height:200px;box-shadow:2px 1px 5px 1px #000;
}
HTML
HTML
<input id='inp' type='button' value='Click me'/>
<div id='cont'>
</div>
jQuery
jQuery
$('input').click(function(){
var textarea = $('<textarea></textarea>');
textarea.css({'width':'200px','height':'200px','box-shadow':'1px 2px 5px 1px #000'});
$('#cont').append(textarea);
});
