IE6和IE7是否支援setAttribute()函式
語法結構:
[JavaScript] 純文字檢視 複製程式碼el.setAttribute(name,value)
引數列表:
程式碼例項:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>setAttribute()函式-螞蟻部落</title> <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>
以上程式碼可以重新設定div的id屬性值,並且彈出新設定的id屬性值。
例項二:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>setAttribute()函式-螞蟻部落</title> <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>
以上程式碼可以設定div的newAttr屬性值,並且彈出此屬性值。這裡需要特別注意的是,因為div預設並不具有newAttr屬性,這個時候setAttribute()函式會首先建立此屬性,然後再給它賦值。
以上兩個程式碼例項在各主流瀏覽器中都能夠成功的執行,但這並不說明setAttribute()函式能夠相容各個瀏覽器。
再看一段程式碼例項:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>setAttribute()函式-螞蟻部落</title> <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>
以上程式碼,在標準瀏覽器中能夠將字型大小設定為18px,字型顏色設定為紅色,但是在IE6和IE7瀏覽器中卻不能夠生效。
不過依然可以使用mydiv.getAttribute("class")獲取屬性值"textcolor"。
也就是說在IE6或者IE7瀏覽器中,setAttribute()函式可以使用,但是並不是對所有的屬性都有效。
下面就列舉一下存在上述問題的屬性:
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
為了解決上述問題就要寫一個通用的跨瀏覽器的設定元素屬性的介面方法:
[HTML] 純文字檢視 複製程式碼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非以上列舉的屬性仍然用原始屬性名;最後這些特殊屬性使用fixAttr,例如class。
那麼上面的程式碼例項修改為以下形式即可:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>setAttribute()函式-螞蟻部落</title> <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> <div id="mydiv">螞蟻部落</div> </body> </html>
以上程式碼可以在各主流瀏覽器中都有效,都可以將字型大小設定為18px,顏色設定為紅色。
至於style屬性可以使用el.style.color="xxx"這種形式進行相容。
相關文章
- IE6和IE7也是支援display:inline-blockinlineBloC
- Hive是否支援in函式Hive函式
- jQuery在v1.13版本中不再支援IE6和IE7jQuery
- jQuery 2.0 移除對IE6/IE7/IE8的支援jQuery
- IE6/IE7不支援first-child的解決辦法
- CSS相容IE6,IE7,FireFoxCSSFirefox
- CSS純色半透明 支援IE6/IE7/IE8 FF CHROME OPERA SAFARICSSChrome
- css相容IE6/IE7/FF的通用方法和著名的Clearfix HackCSS
- ie6,ie7,ff的css相容hack寫法CSS
- CSS實現文字豎排顯示(相容IE6/IE7)CSS
- getAttribute()和setAttribute()用法
- bash函式應用之:判斷函式是否存在函式
- 7、支援函式 (轉)函式
- JavaScript 判斷函式是否存在JavaScript函式
- 而井教你判斷當前Javascript執行環境是否支援async函式JavaScript函式
- POI 不支援函式XIRR函式
- 瀏覽器相容IE6、IE7、IE8、Firefox、OperaCSShack區分瀏覽器FirefoxCSS
- dataset、setAttribute()和getAttribute() 區別
- jQuery將不再支援IE6/7/8jQuery
- JavaScript setAttribute()JavaScript
- PHP 支援加解密的函式PHP解密函式
- 支援向量機(三)核函式函式
- 遠端桌面函式不支援函式
- 建構函式與解構函式是否可以丟擲異常函式
- 字元函式、數字函式和日期函式字元函式
- JavaScript 判斷變數是否是函式JavaScript變數函式
- 類函式和物件函式 PHP函式物件PHP
- openGauss 高階分析函式支援函式
- Javascript 實現 Textarea 自動伸縮,相容IE6、IE7、IE8、IE9...JavaScriptIE9
- IE5,IE6,IE7,IE8的css相容性列表[轉自MSDN]CSS
- js如何判斷一個函式是否存在JS函式
- 函式地址(不知道是否確切!) (轉)函式
- 函式防抖和函式節流函式
- 函式基礎和函式引數函式
- Rust中的into函式和from函式Rust函式
- Python strip函式和split函式Python函式
- ascii函式和substr函式的用法ASCII函式
- JavaScript函式宣告和函式表示式區別JavaScript函式