首頁 > 開發者 > JavaScript
javascript中setAttribute()函數使用方法及相容性，javascriptattribute
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"這種形式進行相容。
以上所述就是本文的全部內容了，希望大家能夠喜歡。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
