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

2024-05-06 16:23:28

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

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

setAttribute()函數(shù)可以設(shè)置對象的屬性，如果不存在此屬性，則會創(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屬性，這個時候setAttribute()函數(shù)會首先創(chuàng)建此屬性，然后再給它賦值。

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

再看一段代碼實(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ù)可以使用，但是并不是對所有的屬性都有效。

下面就列舉一下存在上述問題的屬性:

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

為了解決上述問題就要寫一個通用的跨瀏覽器的設(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>