createElement 创建的对象如何快速设置样式？

Question

所谓的快速设置样式就是说用类似
<input type="text" style="border:2px solid #ABC; width:100px; height:100px;" />而不是
var oDiv = document.createElement("DIV");
oDiv.id = "xxx";
oDiv.style.border = "2px solid #ABC";
oDiv.style.width = "100px";
oDiv.style.height = "100px";
我尝试过
var oDiv = document.createElement("DIV");
oDiv.id = "xxx";
oDiv.STYLE = "border:2px solid #ABC; width:100px; height:100px";在IE8下无报错也无效果...

Answer 1

oDiv.STYLE = "border:2px solid #ABC; width:100px; height:100px";
这个写法是错误的在HTML中定义样式
<input type="text" style="border:2px solid #ABC; width:100px; height:100px;" />
在脚本中定义样式
oDiv.style.border = "2px solid #ABC";SyntaxHTML { border-bottom-style : sStyle }  
Scripting object.style.borderBottomStyle [ = sStyle ] 

Answer 2

oDiv.STYLE = "border:2px solid #ABC; width:100px; height:100px";
----------------------------
改为
oDiv.STYLE.cssText = "border:2px solid #ABC; width:100px; height:100px";不过最好是定义css样式名，这样修改样式焦点集中在css文件，而不用去关注js代码。
.input_text{
 ...
}
oDiv.className = input_text;

Answer 3

oDiv.className = 'input_text';

Answer 4

oDiv.style.border = "2px solid #ABC";
oDiv.style.width = "100px";
oDiv.style.height = "100px";document.body.appendChild("oDiv ");//加上这句试试
这样定义可以。

Answer 5

document.body.appendChild(oDiv) ;//加上这句试试

Answer 6

给className赋值一个已有的样式名

Answer 7

最简单的方式是采用setAttribute方法
oDiv.setAttribute("style","border:2px solid #ABC; width:100px; height:100px;");

Answer 8

2楼所说的 element.style.cssText也可以。

Answer 9

我觉得还是2楼的定义方法好，把js和css有效的结合起来了，而且以后也容易修改代码不会出错。

Answer 10

测试了...
不行哦...oDiv.style.cssText = "border:2px solid #ABC; width:100px; height:100px;";
是可以的
不过必须是
oDiv.style.cssText
如果写成
oDiv.STYLE.cssText
的话，IE8下会报错，说是没有这个属性

Answer 11

感谢！！
已经改成用className来定义了嗯...我知道要加上这句才会出现在页面中
只是因为我的问题主要是样式设置，所以我就没把这句写上去了...

Answer 12

嗯........在FF下测试成功
但IE8下不行...