如何在动态生成的元素上应用样式
how to apply style on dynamically generated element
function createList(arrunique, arrayout) {
for (i = 0; i < arrayout[0].length; i++) {
var divIdC = i;
var divIdT = i + 10;
$('#tb').append('<select name="combo" style="float:left; width:100px;" id="' + divIdC + '" onchange="getComboVal(this,' + divIdC + ')"></select>');
$('#tb').append('<input type="text" name = "textBox" style= "width:100px;" id="' + divIdT + '" onkeyup="validate(this,"' + divIdT + '") value="0">');
var select = document.getElementById(divIdC);
select.options[select.options.length] = new Option("Select " + arrunique[i][0]);
for (j = 1; j < arrunique[i].length; j++) {
select.options[select.options.length] = new Option(arrunique[i][j]);
};
};
}
在此代码中,我想生成一个组合框和一个文本框,我想应用一些样式表属性或任何类。我该怎么做。它不起作用。
有很多很多方法可以设置javascript创建的元素的样式。这里有一些。单击此处观看现场演示。
var myElem = document.createElement('div');
myElem.style.color = '#FFF';
使用 jQuery:
var $myElem = $('<div></div>');
$myElem.css('color', '#FFF');
或 jQuery css 对象语法(用于传递多个样式(
$myElem.css({display: 'block', background: '#000'});
与其在创建元素后添加样式,您还可以考虑在创建元素后向元素添加一个类并在 css 文件中设置此类样式。
CSS 文件:
.myElem {
color: #FFF;
}
myElem.className = 'myElem';
或
$myElem.addClass('myElem');
$('#tb').append('<input type="text" class="YOURCLASS" name = "textBox" style= "width:100px;" id="'+divIdT+'" onkeyup="validate(this,"'+divIdT+'") value="0">');
请参阅这个简化的 jsFiddle。 确保控制台未生成错误,并且您正在调用 createList()
函数。
相关文章:
- 编写脚本以循环遍历数组并为DOM元素应用值
- 对每个元素应用不同的 CSS
- 将新元素作为指令的默认元素应用
- 仅对一个元素应用设置间隔
- 如果单词出现第 n 次,则对元素应用更改
- 为每个 DOM 元素应用随机 CSS
- 获取一个元素的宽度,并相对于第一个元素应用于另一个元素
- 对子元素应用悬停效果
- 使用纯javascript获取li元素onclick,而不对每个元素应用onclick
- 将数组的元素应用于函数javascript
- 对td元素应用填充引发异常
- 如何为JavaScript附加的DOM元素应用类似live()的功能
- D3.js -有条件地对数组元素应用nest.key()函数
- 对一组元素应用angular指令
- 如何使用min/max-height和height为元素应用响应式CSS高度
- 对未选中的元素应用样式
- 对所有带有id的元素应用JavaScript
- 如何为多个元素应用jquery悬停
- 动态地对:before元素应用样式
- 如果draggable元素应用了转换,Jquery的draggable containment将不起作用