IE6、IE7中setAttribute不支持class/for/rowspan/colspan等屬性
更新時(shí)間：2011年08月28日 18:08:53 作者：
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等屬性的說(shuō)明，需要的朋友可以參考下。
如設(shè)置class屬性
在IE6/7中樣式“abc”將沒(méi)有起作用，雖然使用el.getAttribute('class')能取到值“abc”。
又如for屬性
<label>姓名：</label><input type="checkbox" id="name"/>
<script>
var lab = document.getElementsByTagName('label')[0];
lab.setAttribute('for', 'name');
</script>
我們知道當(dāng)lab設(shè)置了for屬性，點(diǎn)擊label將自動(dòng)將對(duì)應(yīng)的checkbox選中。但以上設(shè)置在IE6/7點(diǎn)擊將不會(huì)選中checkbox。
類(lèi)似的情況還發(fā)生在 cellspacing/cellpadding 上。匯總?cè)缦拢?
class
for
cellspacing
cellpadding
tabindex
readonly
maxlength
rowspan
colspan
usemap
frameborder
contenteditable
因此，當(dāng)寫(xiě)一個(gè)通用的跨瀏覽器的設(shè)置元素屬性的接口方法時(shí)需要考慮注意以上屬性在IE6/7中的特殊性。如下
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非以上列舉的屬性仍然用原始屬性名；最后這些特殊屬性（與JS關(guān)鍵字同名如for，class）使用fixAttr。
好了，現(xiàn)在不用考慮className/htmlFor了，都使用class/for即可。
dom.setAttr(el, 'class', 'red');
dom.getAttr(el, 'class');
dom.setAttr(el, 'for', 'userName');
dom.getAttr(el, 'for');
復(fù)制代碼 代碼如下:
el.setAttribute('class', 'abc');
在IE6/7中樣式“abc”將沒(méi)有起作用，雖然使用el.getAttribute('class')能取到值“abc”。
又如for屬性
復(fù)制代碼 代碼如下:
<label>姓名：</label><input type="checkbox" id="name"/>
<script>
var lab = document.getElementsByTagName('label')[0];
lab.setAttribute('for', 'name');
</script>
我們知道當(dāng)lab設(shè)置了for屬性，點(diǎn)擊label將自動(dòng)將對(duì)應(yīng)的checkbox選中。但以上設(shè)置在IE6/7點(diǎn)擊將不會(huì)選中checkbox。
類(lèi)似的情況還發(fā)生在 cellspacing/cellpadding 上。匯總?cè)缦拢?
class
for
cellspacing
cellpadding
tabindex
readonly
maxlength
rowspan
colspan
usemap
frameborder
contenteditable
因此，當(dāng)寫(xiě)一個(gè)通用的跨瀏覽器的設(shè)置元素屬性的接口方法時(shí)需要考慮注意以上屬性在IE6/7中的特殊性。如下
復(fù)制代碼 代碼如下:
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非以上列舉的屬性仍然用原始屬性名；最后這些特殊屬性（與JS關(guān)鍵字同名如for，class）使用fixAttr。
好了，現(xiàn)在不用考慮className/htmlFor了，都使用class/for即可。
復(fù)制代碼 代碼如下:
dom.setAttr(el, 'class', 'red');
dom.getAttr(el, 'class');
dom.setAttr(el, 'for', 'userName');
dom.getAttr(el, 'for');
相關(guān)文章
DOM操作原生js 的bug,使用jQuery 可以消除的解決方法
下面小編就為大家?guī)?lái)一篇DOM操作原生js 的bug,使用jQuery 可以消除的解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
原生js實(shí)現(xiàn)頁(yè)面滾動(dòng)動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)頁(yè)面滾動(dòng)動(dòng)畫(huà)，使用了requestAnimationFrame，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感為興趣的小伙伴們可以參考一下2022-01-01
這篇文章介紹了echarts安裝與配置的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
JavaScript中removeChild 方法開(kāi)發(fā)示例代碼
這篇文章主要介紹了JavaScript中removeChild 方法開(kāi)發(fā)示例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
這篇文章主要介紹了微信小程序使用component自定義toast彈窗效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
老司機(jī)們，你知道JSON.stringify還有第二個(gè)和第三個(gè)可選參數(shù)嗎？它們是什么呢？是不是感到不可思議？下面這篇文章就來(lái)給大家介紹了一些你可能不知道的JSON.stringify的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2017-08-08
JS組件Bootstrap Table表格多行拖拽效果實(shí)現(xiàn)代碼
這篇文章主要介紹了JS組件Bootstrap Table表格多行拖拽效果實(shí)現(xiàn)代碼，需要的朋友可以參考下2015-12-12
js HTML5 Canvas繪制轉(zhuǎn)盤(pán)抽獎(jiǎng)
這篇文章主要為大家詳細(xì)介紹了js HTML5 Canvas繪制轉(zhuǎn)盤(pán)抽獎(jiǎng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
jQuery實(shí)現(xiàn)文字自動(dòng)橫移
本文詳細(xì)介紹了通過(guò)jquery尺寸相關(guān)函數(shù)實(shí)現(xiàn)文字自動(dòng)橫移的方法。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
這篇文章主要介紹了JS寄快遞地址智能解析,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-07