视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
javascript中setAttribute()函数使用方法及兼容性_javascript技巧
2020-11-27 21:40:49 责编:小采
文档


setAttribute()函数可以设置对象的属性,如果不存在此属性,则会创建此属性。

语法结构:

el.setAttribute(name,value)

参数列表:

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

代码实例:




 

以上代码可以重新设置div的id属性值,并且弹出新设置的id属性值。
实例二:





以上代码可以设置div的newAttr属性值,并且弹出此属性值。这里需要特别注意的是,因为div默认并不具有newAttr属性,这个时候setAttribute()函数会首先创建此属性,然后再给它赋值。

以上两个代码实例在各主流浏览器中都能够成功的执行,但这并不说明setAttribute()函数能够兼容各个浏览器。

再看一段代码实例:





 

以上代码,在标准浏览器中能够将字体大小设置为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

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



首先,标准浏览器直接使用原始属性名;其次,IE6/7非以上列举的属性仍然用原始属性名;最后这些特殊属性使用fixAttr,例如class。

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




 
 

以上代码可以在各主流浏览器中都有效,都可以将字体大小设置为18px,颜色设置为红色。
至于style属性可以使用el.style.color="xxx"这种形式进行兼容。

以上所述就是本文的全部内容了,希望大家能够喜欢。

下载本文
显示全文
专题