我们经常需要在 JavaScript 中为 Element 动态添加各种??属性，这可以通过使用 setAttribute() 来实现，这涉及到浏览器的兼容性问题。
setAttribute(string name, string value)：添加具有指定名称和值的新属性，或将现有属性设置为指定值。
1.风格问题
setAttribute(class, value) 中的类是指改变类属性，所以需要用引号引起来。
vName 表示分配给样式。
例如：
var input = document.createElement(input);
input.setAttribute（类型，文本）；
input.setAttribute(name, q);
input.setAttribute(class,bordercss);
输出时：，即输入控件有bordercss样式属性
注意：class 属性在 W3C DOM 中起着重要的作用，但由于浏览器的差异，仍然存在。
使用 setAttribute(class, vName) 语句动态设置元素的类属性在 Firefox 中有效，但在 IE 中无效。因为使用IE内核的浏览器不能识别类，所以需要使用className来代替；
此外，Firefox 不知道类名。所以常用的方法是两者都做：
element.setAttribute(class, value); //对于火狐
element.setAttribute(className, value); //对于 IE
2.方法属性等问题
例如：
var bar = document.getElementById(testbt);
bar.setAttribute(onclick, javascript:alert('这是一个测试！'););
这里用setAttribute来指定e的onclick属性，简单易懂。
但是 IE 不支持它。 IE不支持setAttribute函数，但不支持用setAttribute设置某些属性，如对象属性、集合属性、事件属性。也就是说用setAttribute设置样式和onclick属性是在IE中。不可能的。
为了实现与各种浏览器的兼容，可以使用点符号来设置 Element 的对象属性、集合属性和事件属性。
document.getElementById(testbt).className = bordercss;
document.getElementById(testbt).style.cssText = 颜色：#00f;;
document.getElementById(testbt).style.color = #00f;
document.getElementById(testbt).οonclick= function () { alert(这是一个测试！); }
由此延伸的问题：
一个输入文本，当html被赋值为一个div的innerHTML时，遇到一个现象，在firefox下（IE下不存在这个问题），赋值后的innerHTML不包含值，即当你在文本后输入框的内容，当你要赋值给div时，只会得到它，而这里的值会一直清零。
这时候setAttribute起作用了，在input中添加：οnkeyup=this.setAttribute('value', this.value)，即动态添加value值到input控件中，然后将文本框赋值给div，值不会被清除。
(error)
|
收藏
