setAttribute()函數可以設置對象的屬性，如果不存在此屬性，則會創建此屬性。
語法結構:
el.setAttribute(name,value)
參數列表:
參數 描述
name 必需。規定要設置的屬性名。
value 必需。規定要設置的屬性值。
代碼實例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<script type="text/javascript">
window.onload=function(){
var mydiv=document.getElementById("mydiv");
mydiv.setAttribute("id","newid");
alert(mydiv.getAttribute("id"));
}
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
以上代碼可以重新設置div的id屬性值，並且彈出新設置的id屬性值。
實例二:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<script type="text/javascript">
window.onload=function(){
var mydiv=document.getElementById("mydiv");
mydiv.setAttribute("newAttr","attrValue");
alert(mydiv.getAttribute("newAttr"));
}
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
以上代碼可以設置div的newAttr屬性值，並且彈出此屬性值。這裡需要特別注意的是，因為div默認並不具有newAttr屬性，這個時候setAttribute()函數會首先創建此屬性，然後再給它賦值。
以上兩個代碼實例在各主流浏覽器中都能夠成功的執行，但這並不說明setAttribute()函數能夠兼容各個浏覽器。
再看一段代碼實例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css">
.textcolor{
font-size:18px;
color:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
var mydiv=document.getElementById("mydiv");
mydiv.setAttribute("class","textcolor");
}
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
以上代碼，在標准浏覽器中能夠將字體大小設置為18px，字體顏色設置為紅色，但是在IE6和IE7浏覽器中卻不能夠生效。
不過依然可以使用mydiv.getAttribute("class")獲取屬性值"textcolor"。
也就是說在IE6或者IE7浏覽器中，setAttribute()函數可以使用，但是並不是對所有的屬性都有效。
下面就列舉一下存在上述問題的屬性:
1.class
2.for
3.cellspacing
4.cellpadding
5.tabindex
6.readonly
7.maxlength
8.rowspan
9.colspan
10.usemap
11.frameborder
12.contenteditable
13.style
為了解決上述問題就要寫一個通用的跨浏覽器的設置元素屬性的接口方法:
dom=(function(){
var fixAttr={
tabindex:'tabIndex',
readonly:'readOnly',
'for':'htmlFor',
'class':'className',
maxlength:'maxLength',
cellspacing:'cellSpacing',
cellpadding:'cellPadding',
rowspan:'rowSpan',
colspan:'colSpan',
usemap:'useMap',
frameborder:'frameBorder',
contenteditable:'contentEditable'
},
div=document.createElement('div');
div.setAttribute('class','t');
var supportSetAttr = div.className === 't';
return {
setAttr:function(el, name, val){
el.setAttribute(supportSetAttr ? name : (fixAttr[name] || name), val);
},
getAttr:function(el, name){
return el.getAttribute(supportSetAttr ? name : (fixAttr[name] || name));
}
}
})();
首先，標准浏覽器直接使用原始屬性名；其次，IE6/7非以上列舉的屬性仍然用原始屬性名；最後這些特殊屬性使用fixAttr，例如class。
那麼上面的代碼實例修改為以下形式即可:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css">
.textcolor{
font-size:18px;
color:red;
}
</style>
<script type="text/javascript">
dom=(function(){
var fixAttr={
tabindex:'tabIndex',
readonly:'readOnly',
'for':'htmlFor',
'class':'className',
maxlength:'maxLength',
cellspacing:'cellSpacing',
cellpadding:'cellPadding',
rowspan:'rowSpan',
colspan:'colSpan',
usemap:'useMap',
frameborder:'frameBorder',
contenteditable:'contentEditable'
},
div=document.createElement('div');
div.setAttribute('class','t');
var supportSetAttr = div.className === 't';
return {
setAttr:function(el, name, val){
el.setAttribute(supportSetAttr ? name : (fixAttr[name] || name), val);
},
getAttr:function(el, name){
return el.getAttribute(supportSetAttr ? name : (fixAttr[name] || name));
}
}
})();
window.onload=function(){
var mydiv=document.getElementById("mydiv");
dom.setAttr(mydiv, 'class', 'textcolor');
}
</script>
</head>
<body>
</body>
</html>
以上代碼可以在各主流浏覽器中都有效，都可以將字體大小設置為18px，顏色設置為紅色。
至於style屬性可以使用el.style.color="xxx"這種形式進行兼容。
以上所述就是本文的全部內容了，希望大家能夠喜歡。