IE6、IE7中setAttribute不支持class/for/rowspan/colspan等屬性
更新時間：2011年08月28日 18:08:53 作者：
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等屬性的說明，需要的朋友可以參考下。
如設(shè)置class屬性
在IE6/7中樣式“abc”將沒有起作用，雖然使用el.getAttribute('class')能取到值“abc”。
又如for屬性
<label>姓名：</label><input type="checkbox" id="name"/>
<script>
var lab = document.getElementsByTagName('label')[0];
lab.setAttribute('for', 'name');
</script>
我們知道當lab設(shè)置了for屬性，點擊label將自動將對應(yīng)的checkbox選中。但以上設(shè)置在IE6/7點擊將不會選中checkbox。
類似的情況還發(fā)生在 cellspacing/cellpadding 上。匯總?cè)缦拢?
class
for
cellspacing
cellpadding
tabindex
readonly
maxlength
rowspan
colspan
usemap
frameborder
contenteditable
因此，當寫一個通用的跨瀏覽器的設(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));
}
}
})();
首先，標準瀏覽器直接使用原始屬性名；其次，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');
復制代碼 代碼如下:
el.setAttribute('class', 'abc');
在IE6/7中樣式“abc”將沒有起作用，雖然使用el.getAttribute('class')能取到值“abc”。
又如for屬性
復制代碼 代碼如下:
<label>姓名：</label><input type="checkbox" id="name"/>
<script>
var lab = document.getElementsByTagName('label')[0];
lab.setAttribute('for', 'name');
</script>
我們知道當lab設(shè)置了for屬性，點擊label將自動將對應(yīng)的checkbox選中。但以上設(shè)置在IE6/7點擊將不會選中checkbox。
類似的情況還發(fā)生在 cellspacing/cellpadding 上。匯總?cè)缦拢?
class
for
cellspacing
cellpadding
tabindex
readonly
maxlength
rowspan
colspan
usemap
frameborder
contenteditable
因此，當寫一個通用的跨瀏覽器的設(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));
}
}
})();
首先，標準瀏覽器直接使用原始屬性名；其次，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');
相關(guān)文章
麥雞的TAB切換功能代碼2008-10-10
JavaScript 事件流、事件處理程序及事件對象總結(jié)
JS與HTML之間的交互通過事件實現(xiàn)。事件就是文檔或瀏覽器窗口中發(fā)生的一些特定的交互瞬間。可以使用監(jiān)聽器(或處理程序)來預定事件，以便事件發(fā)生時執(zhí)行相應(yīng)的代碼。本文將介紹JS事件相關(guān)的基礎(chǔ)知識。2017-04-04
js 將線性數(shù)據(jù)轉(zhuǎn)為樹形的示例代碼
這篇文章主要介紹了js 將線性數(shù)據(jù)轉(zhuǎn)為樹形的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
項目開發(fā)遇到個問題，就是引入bootstrap下拉多選框進行多選的時候，用form表單提交到后臺，獲取不到多選的值，只能獲取的選擇的第一個值，怎么回事呢？下面小編給大家分析下bootstrap 下拉多選框進行多選傳值問題，一起看看吧2017-02-02
JS作為面向?qū)ο蟮娜躅愋驼Z言,繼承也是其非常強大的特性之一,那么如何在JS中實現(xiàn)繼承呢?下面這篇文章主要給大家介紹了關(guān)于JS中六種繼承方式以及優(yōu)缺點的相關(guān)資料,需要的朋友可以參考下2021-10-10
javascript中直接引用Microsoft的COM生成Word
直接引用Microsoft的COM是可以生成Word的，下面為大家介紹下實現(xiàn)的javascript代碼2014-01-01
ES6中new Function()語法及應(yīng)用實例分析
這篇文章主要介紹了ES6中new Function()語法及應(yīng)用,結(jié)合實例形式分析了ES6中new Function()的基本語法、功能、原理、閉包等相關(guān)使用技巧,需要的朋友可以參考下2020-02-02
javascript 用函數(shù)語句和表達式定義函數(shù)的區(qū)別詳解
本篇文章主要介紹了javascript 用函數(shù)語句和表達式定義函數(shù)的區(qū)別。需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
什么叫直覺解？根據(jù)目前流行的免殺方法，有這么幾種初級加密方法。進制加密，URLEncode加密，加花2008-06-06
這篇文章主要介紹了在頁面加載之后執(zhí)行JavaScript的詳細過程，本文通過實例代碼文字解說給大家講解的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06