JavaScript中setAttribute用法介紹
setAttribute()函數(shù)可以設(shè)置對(duì)象的屬性，如果不存在此屬性，則會(huì)創(chuàng)建此屬性。
語法結(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í)行，但這并不說明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瀏覽器中卻不能夠生效。
不過依然可以使用mydiv.getAttribute("class")獲取屬性值"textcolor"。
也就是說在IE6或者IE7瀏覽器中，setAttribute()函數(shù)可以使用，但是并不是對(duì)所有的屬性都有效。
下面就列舉一下存在上述問題的屬性:
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
為了解決上述問題就要寫一個(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)行兼容。
1、樣式問題
setAttribute("class", value)中class是指改變"class"這個(gè)屬性，所以要帶引號(hào)。
vName代表對(duì)樣式賦值。
例如:
var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("name", "q");
input.setAttribute("class",bordercss);
輸出時(shí)：<input type="text" name="q" class="bordercss">,即，input控件具有bordercss樣式屬性
注意：class屬性在W3C DOM中扮演著很重要的角色，但由于瀏覽器差異性仍然存在。
使用setAttribute("class", vName)語句動(dòng)態(tài)設(shè)置Element的class屬性在firefox中是行的通的，但在IE中卻不行。因?yàn)槭褂肐E內(nèi)核的瀏覽器不認(rèn)識(shí)"class"，要改用"className"；
同樣，firefox 也不認(rèn)識(shí)"className"。所以常用的方法是二者兼?zhèn)洌?br />
element.setAttribute("class", value); //for firefox
element.setAttribute("className", value); //for IE
2、方法屬性等問題
例如：
var bar = document.getElementById("testbt");
bar.setAttribute("onclick", "javascript:alert('This is a test!');");
這里利用setAttribute指定e的onclick屬性，簡(jiǎn)單，很好理解。
但是IE不支持，IE并不是不支持setAttribute這個(gè)函數(shù)，而是不支持用setAttribute設(shè)置某些屬性，例如對(duì)象屬性、集合屬性、事件屬性，也就是說用setAttribute設(shè)置style和onclick這些屬性在IE中是行不通的。
為達(dá)到兼容各種瀏覽器的效果，可以用點(diǎn)符號(hào)法來設(shè)置Element的對(duì)象屬性、集合屬性和事件屬性。
document.getElementById("testbt").className = "bordercss";
document.getElementById("testbt").style.cssText = "color: #00f;";
document.getElementById("testbt").style.color = "#00f";
document.getElementById("testbt").onclick= function () { alert("This is a test!"); }
如對(duì)本文有疑問，請(qǐng)?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會(huì)為你解答！！ 點(diǎn)擊進(jìn)入論壇
