element.style存在移动端浏览器兼容性问题

个人在做Web开发时，遇到了在PC浏览器端可以运行，但是在手机端无响应的问题，由于手机端无法进入调试模式，所以不知道报了什么错。智能尝试加alert，断点调试，发现卡在了element.style = 一个字符串的语句，该语句在各浏览器不兼容，改为object.style.cssText后方可运行。

下文转自一篇文章，对js设置样式的兼容问题做了简单的总结：

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;

（来自：http://www.cnblogs.com/leejersey/archive/2013/02/20/2919052.html）