setAttribute()的兼容性问题解决

最新推荐文章于 2022-03-25 12:59:35 发布

原创最新推荐文章于 2022-03-25 12:59:35 发布 · 528 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #js

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了在不同浏览器间实现元素样式兼容性的方法，包括class、className及style等属性的设置技巧，确保网页能在IE7及以上版本、Chrome、Firefox和Opera等主流浏览器中正确显示。

class和className兼容方法：

object.setAttribute(“class”,“content”)

在IE8、Chrome、火狐、Opera10中都能设置成功；但是在IE7下无法设置。

object.setAttribute(“className”,“content”)

只有IE7能设置成功，但是其他浏览器均无法设置。

兼容方法：

使用 object.className=“content”

style和cssText兼容方法：

object.setAttribute(“style”,“position:absolute;left:10px;top:10px;”)

在IE8、Chrome、火狐、Opera10中都能设置成功；但是在IE7下无法设置。

object.setAttribute(“cssText”,“position:absolute;left:10px;top:10px;”)

此设置方法，所有浏览器均不支持。

兼容方法：

使用 object.style.cssText=“position:absolute;left:10px;top:10px;”

或者单独 object.style.各个属性，逐一进行设置。

Firefox和IE的JS兼容性：设置元素style熟悉

在IE下setAttribute设置元素的对象、集合和事件属性都只当成普通属性，起不到原有的作用，但可以直接进行赋值操作，如下：

var cssText = ”font-weight:bold;color:red;”

 //下面写法用于firefox类型浏览器
element.setAttribute(“style”,cssText);

//下面写法用于IE类型浏览器
element.style.cssText = cssText;