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