javascript中setAttribute()函數(shù)使用方法及兼容性

更新時(shí)間：2015年07月19日 11:57:14 投稿：hebedich

這篇文章主要介紹了javascript中setAttribute()函數(shù)使用方法及兼容性的相關(guān)資料,需要的朋友可以參考下

setAttribute()函數(shù)可以設(shè)置對(duì)象的屬性，如果不存在此屬性，則會(huì)創(chuàng)建此屬性。

語(yǔ)法結(jié)構(gòu):

el.setAttribute(name,value)

參數(shù)列表:

參數(shù) 描述
name 必需。規(guī)定要設(shè)置的屬性名。
value 必需。規(guī)定要設(shè)置的屬性值。

代碼實(shí)例:

<!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>

以上代碼可以重新設(shè)置div的id屬性值，并且彈出新設(shè)置的id屬性值。
實(shí)例二:

<!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>

以上代碼可以設(shè)置div的newAttr屬性值，并且彈出此屬性值。這里需要特別注意的是，因?yàn)閐iv默認(rèn)并不具有newAttr屬性，這個(gè)時(shí)候setAttribute()函數(shù)會(huì)首先創(chuàng)建此屬性，然后再給它賦值。

以上兩個(gè)代碼實(shí)例在各主流瀏覽器中都能夠成功的執(zhí)行，但這并不說(shuō)明setAttribute()函數(shù)能夠兼容各個(gè)瀏覽器。

再看一段代碼實(shí)例:

<!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>

以上代碼，在標(biāo)準(zhǔn)瀏覽器中能夠?qū)⒆煮w大小設(shè)置為18px，字體顏色設(shè)置為紅色，但是在IE6和IE7瀏覽器中卻不能夠生效。

不過(guò)依然可以使用mydiv.getAttribute("class")獲取屬性值"textcolor"。

也就是說(shuō)在IE6或者IE7瀏覽器中，setAttribute()函數(shù)可以使用，但是并不是對(duì)所有的屬性都有效。

下面就列舉一下存在上述問(wèn)題的屬性:

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

為了解決上述問(wèn)題就要寫(xiě)一個(gè)通用的跨瀏覽器的設(shè)置元素屬性的接口方法:

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));
 }
}
})();

首先，標(biāo)準(zhǔn)瀏覽器直接使用原始屬性名；其次，IE6/7非以上列舉的屬性仍然用原始屬性名；最后這些特殊屬性使用fixAttr，例如class。

那么上面的代碼實(shí)例修改為以下形式即可:

<!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>

以上代碼可以在各主流瀏覽器中都有效，都可以將字體大小設(shè)置為18px，顏色設(shè)置為紅色。
至于style屬性可以使用el.style.color="xxx"這種形式進(jìn)行兼容。

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: