IE6和IE7是否支援setAttribute()函式

admin發表於2017-02-11
原文網址 : https://www.softwhy.com/article-840-1.html
函式
setAttribute()函式可以設定物件的屬性，如果不存在此屬性，則會建立此屬性。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
el.setAttribute(name,value)

引數列表:

引數描述
name必需。規定要設定的屬性名。
value必需。規定要設定的屬性值。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>setAttribute()函式-螞蟻部落</title> 
<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屬性值。

例項二:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>setAttribute()函式-螞蟻部落</title> 
<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()函式能夠相容各個瀏覽器。

再看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>setAttribute()函式-螞蟻部落</title> 
<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

為了解決上述問題就要寫一個通用的跨瀏覽器的設定元素屬性的介面方法:

[HTML] 純文字檢視 複製程式碼
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。

那麼上面的程式碼例項修改為以下形式即可:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>setAttribute()函式-螞蟻部落</title> 
<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> 
<div id="mydiv">螞蟻部落</div> 
</body> 
</html>

以上程式碼可以在各主流瀏覽器中都有效，都可以將字型大小設定為18px，顏色設定為紅色。

至於style屬性可以使用el.style.color="xxx"這種形式進行相容。

相關文章