JavaScript中setAttribute用法介绍

我们经常需要在JavaScript中给Element动态添加各种属性这可以通过使用setAttribute()来实现这就涉及到了浏览器的兼容性问题

setAttribute(string name string value)增加一个指定名称和值的新属性或者把一个现有的属性设定为指定的值
样式问题
setAttribute("class" value)中class是指改变"class"这个属性所以要带引号
vName代表对样式赋值
例如:

复制代码 代码如下:
var input = documentcreateElement("input");
inputsetAttribute("type" "text");
inputsetAttribute("name" "q");
inputsetAttribute("class"bordercss);

输出时<input type="text" name="q" class="bordercss">即input控件具有bordercss样式属性
注意class属性在WC DOM中扮演着很重要的角色但由于浏览器差异性仍然存在
使用setAttribute("class" vName)语句动态设置Element的class属性在firefox中是行的通的但在IE中却不行因为使用IE内核的浏览器不认识"class"要改用"className"
同样firefox 也不认识"className"所以常用的方法是二者兼备

复制代码 代码如下:
elementsetAttribute("class" value); //for firefox
elementsetAttribute("className" value); //for IE

方法属性等问题
例如

复制代码 代码如下:
var bar = documentgetElementById("testbt");
barsetAttribute("onclick" "javascript:alert(This is a test!);");

这里利用setAttribute指定e的onclick属性简单很好理解
但是IE不支持IE并不是不支持setAttribute这个函数而是不支持用setAttribute设置某些属性例如对象属性集合属性事件属性也就是说用setAttribute设置style和onclick这些属性在IE中是行不通的
为达到兼容各种浏览器的效果可以用点符号法来设置Element的对象属性集合属性和事件属性

复制代码 代码如下:

documentgetElementById("testbt")className = "bordercss";
documentgetElementById("testbt")stylecssText = "color: #f;";
documentgetElementById("testbt")stylecolor = "#f";
documentgetElementById("testbt")onclick= function () { alert("This is a test!"); }