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)文章
麥雞的TAB切換功能代碼2008-10-10
JavaScript 事件流、事件處理程序及事件對(duì)象總結(jié)
JS與HTML之間的交互通過(guò)事件實(shí)現(xiàn)。事件就是文檔或?yàn)g覽器窗口中發(fā)生的一些特定的交互瞬間?？梢允褂帽O(jiān)聽(tīng)器(或處理程序)來(lái)預(yù)定事件，以便事件發(fā)生時(shí)執(zhí)行相應(yīng)的代碼。本文將介紹JS事件相關(guān)的基礎(chǔ)知識(shí)。2017-04-04
js 將線(xiàn)性數(shù)據(jù)轉(zhuǎn)為樹(shù)形的示例代碼
這篇文章主要介紹了js 將線(xiàn)性數(shù)據(jù)轉(zhuǎn)為樹(shù)形的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
bootstrap 下拉多選框進(jìn)行多選傳值問(wèn)題代碼分析
項(xiàng)目開(kāi)發(fā)遇到個(gè)問(wèn)題，就是引入bootstrap下拉多選框進(jìn)行多選的時(shí)候，用form表單提交到后臺(tái)，獲取不到多選的值，只能獲取的選擇的第一個(gè)值，怎么回事呢？下面小編給大家分析下bootstrap 下拉多選框進(jìn)行多選傳值問(wèn)題，一起看看吧2017-02-02
JS中的六種繼承方式以及優(yōu)缺點(diǎn)總結(jié)
JS作為面向?qū)ο蟮娜躅?lèi)型語(yǔ)言,繼承也是其非常強(qiáng)大的特性之一,那么如何在JS中實(shí)現(xiàn)繼承呢?下面這篇文章主要給大家介紹了關(guān)于JS中六種繼承方式以及優(yōu)缺點(diǎn)的相關(guān)資料,需要的朋友可以參考下2021-10-10
javascript中直接引用Microsoft的COM生成Word
直接引用Microsoft的COM是可以生成Word的，下面為大家介紹下實(shí)現(xiàn)的javascript代碼2014-01-01
ES6中new Function()語(yǔ)法及應(yīng)用實(shí)例分析
這篇文章主要介紹了ES6中new Function()語(yǔ)法及應(yīng)用,結(jié)合實(shí)例形式分析了ES6中new Function()的基本語(yǔ)法、功能、原理、閉包等相關(guān)使用技巧,需要的朋友可以參考下2020-02-02
javascript 用函數(shù)語(yǔ)句和表達(dá)式定義函數(shù)的區(qū)別詳解
本篇文章主要介紹了javascript 用函數(shù)語(yǔ)句和表達(dá)式定義函數(shù)的區(qū)別。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
什么叫直覺(jué)解？根據(jù)目前流行的免殺方法，有這么幾種初級(jí)加密方法。進(jìn)制加密，URLEncode加密，加花2008-06-06
這篇文章主要介紹了在頁(yè)面加載之后執(zhí)行JavaScript的詳細(xì)過(guò)程，本文通過(guò)實(shí)例代碼文字解說(shuō)給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06