乐者为王

Do one thing, and do it well.

W3C DOM - {setAttribute()}

setAttribute(string name, string value):增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。

setAttribute()的差异

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

1
2
var obj = document.getElementById("obj");
obj.setAttribute("onclick", "javascript:alert('This is a test!');");

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

1
2
3
4
document.getElementById("obj").className = "fruit";
document.getElementById("obj").style.cssText = "color: #00f;";
document.getElementById("obj").style.color = "#00f";
document.getElementById("obj").onclick = function () { alert("This is a test!"); }

关于class和className

class属性在W3C DOM中扮演着很重要的角色,但由于浏览器差异性仍然存在。使用setAttribute("class", vName)语句动态设置element的class属性在Firefox中是行的通的,在IE中却不行。因为使用IE内核的浏览器不认识“class”,要改用“className”;同样,Firefox也不认识“className”。所以常用的方法是二者兼备:

1
2
element.setAttribute("class", vName);
element.setAttribute("className", vName);    // for IE

cellspacing和cellpadding

虽然在CSS中存在与cellpadding和cellspacing这两个属性等价的样式属性padding和border-spacing。然而,浏览器对这些样式属性支持的不一致,有时仍会使用cellpadding和cellspacing来调整表格的间距。不过,在Firefox中有效的setAttribute("cellpadding", value)到了IE下就不行了,必须改成cellPadding才可以(注意:p要大写)。幸好Firefox也支持setAttribute("cellPadding", value)。所以二者兼容的代码是:

1
2
element.setAttribute("cellSpacing", value);
element.setAttribute("cellPadding", value);

Comments