javascript中setAttribute()函數使用方法及相容性_javascript技巧
- WBOY原創
- 2016-05-16 15:49:371544瀏覽
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"這種形式來相容。
以上所述就是本文的全部內容了，希望大家能夠喜歡。