你的位置:首页 > Java教程

[Java教程]IE6和IE7是否支持setAttribute()函数


IE6和IE7是否支持setAttribute()函数:
setAttribute()函数可以设置对象的属性,如果不存在此属性,则会创建此属性。
语法结构:

el.setAttribute(name,value)

参数列表:

参数描述
name必需。规定要设置的属性名。
value必需。规定要设置的属性值。

代码实例:

<!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属性值。
实例二:

<!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()函数能够兼容各个浏览器。

再看一段代码实例:

<!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

为了解决上述问题就要写一个通用的跨浏览器的设置元素属性的接口方法:

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。

那么上面的代码实例修改为以下形式即可:

<!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"这种形式进行兼容。

原文地址是:http://www.51texiao.cn/javascriptjiaocheng/2015/0430/487.html

最原始地址是:http://www.softwhy.com/




去广西旅游最佳路线广西旅游景点推荐广西跟团旅游报价多少广西旅游线路大全广西旅游报价价格山花烂漫时 江浙沪最美的小众县城 下川岛到那琴半岛有多远?那琴半岛地质海洋公园4月景色怎么样? 浪漫海岸一日游费用?茂名浪漫海岸门票价格? 茂名浪漫海岸旅游度假区住宿价格?浪漫海岸旅游度假区房间预订? 那琴半岛地质海洋公园游玩攻略?台山海洋公园游玩路线推荐? 天津夜景是什么颜色 盘点津城出名夜景地 那琴半岛地质海洋公园里面能住宿吗?台山海洋公园别墅住几人? 台城到那琴半岛地质海洋公园在哪里坐车?台城到那琴半岛地质海洋公园坐车多少钱? 2015美丽乡村游金秋休闲之 无锡采桔地图 在海天佛国普陀山 听梵音与涛声交织起伏(组图) 螺髻山温泉 天气渐凉 四川周边温泉圣地盘点 普吉岛酒店有哪些?推荐普吉岛酒店 在马尔代夫旅游可以用人民币吗? 2015年春节泰国普吉岛天气怎么样? 泰国芭提雅有什么好玩的介绍? 0402YA7R0DAT2A Datasheet 0402YA7R0DAT2A Datasheet 1210YC104JAT2A Datasheet 1210YC104JAT2A Datasheet LD035C271KAB2A Datasheet LD035C271KAB2A Datasheet 四平至港澳旅游团 四平至港澳旅游团 四平至港澳旅游团 佳木斯到香港的旅游团 佳木斯到香港的旅游团 佳木斯到香港的旅游团 从黑龙江到香港旅游团 从黑龙江到香港旅游团 从黑龙江到香港旅游团