Question

再次感谢所有伟大的思想。

我的期望正是他们在示例网站中所拥有的。

示例网站： http://www.printvenue.com/customer-design/editor/rounded-corner-business-cards/3-0128-vc-psd

---＆gt;仅在CANVAS区域动态创建文本框。

---＆gt;文本框输入文字的字体，字体大小，颜色..通过获取ID更改 var somename = document.getelementbyid（“textbox的id - 在这种情况下id得到唯一的”）; somename = here所有改变颜色的功能，字体如下

但是，

我的问题是动态添加文本框onclick按钮，所以如何为id分配 var somename = document.getelementbyid（“文本框的id（动态创建的文本框id）”）;

同时文本框应该是可移动的，任何都在画布上。

Answer 1

您可以像这样创建一个新的HTML元素：

var textBox = document.createElement("textarea");

将其添加到父使用

document.getElementById([insert id of parent here]).appendChild(textBox);

此父级应该是所有textareas所在的div / html元素。

Example in JSFiddle

<强> HTML

<div id='parent'>
    <textarea>txt1</textarea>
    <textarea>txt2</textarea>
    <textarea>txt3</textarea>
</div>
<button onClick="addBox()">add textarea</button>

<强> JS

addBox = function(){
    var textBox = document.createElement("textarea");
    document.getElementById("parent").appendChild(textBox);
}

Example in JSFiddle with JQuery

<强> HTML

<div id='parent'>
    <textarea>txt1</textarea>
    <textarea>txt2</textarea>
    <textarea>txt3</textarea>
</div>
<button>add textarea</button>

<强>的jQuery

$(function(){
    $('button').on('click', function(){
        var textBox = document.createElement("textarea");
        $('#parent').append(textBox);
    });
});

Answer 2

这是您想要的link：

JavaScript Version:

<强> HTML

<input id='inp' type='button' value='Click me'/>
<div id='cont'>

</div>

<强>的JavaScript

document.getElementById('inp').addEventListener('click', function () {
        var textarea = document.createElement('textarea');
        textarea.className="mytextbox";
        document.getElementById('cont').appendChild(textarea);
    });

<强>的CSS

.mytextbox{
    width:200px;height:200px;box-shadow:2px 1px 5px 1px #000;

}

jQuery Version :

<强> HTML

<input id='inp' type='button' value='Click me'/>
<div id='cont'>

</div>

<强>的jQuery

$('input').click(function(){

     var textarea =  $('<textarea></textarea>');
     textarea.css({'width':'200px','height':'200px','box-shadow':'1px 2px 5px 1px #000'});
    $('#cont').append(textarea);

});

在单击按钮上动态创建文本框，并更改其所选文本框的css属性

2 个答案: