IE模式下CSS样式无法通过JavaScript更新的问题求助

原因 #

IE及IE模式中，DOM元素的style属性是CSSStyleDeclaration对象，不支持直接赋值字符串来批量设置样式。而现代浏览器允许通过直接给style属性赋值字符串快速应用样式，这种兼容性差异就是问题所在。

解决方法 #

方法1：用style.cssText批量设置 #

这是兼容IE和所有现代浏览器的批量设置方式，替换你原来的直接赋值操作即可：

var extraEl = document.querySelector("#suiteBarRight");
extraEl.style.cssText = "padding:10px;";

var extraEl2 = document.querySelector("#suiteBarLeft");
extraEl2.style.cssText = "display:none";

var extraEl3 = document.querySelector("#welcomeMenuBox");
extraEl3.style.cssText = "display:none";

var extraEl4 = document.querySelector("#suiteBarButtons");
extraEl4.style.cssText = "display:none";

方法2：逐个设置单个样式属性 #

如果样式不多，直接操作style对象的单个属性也完全可行，兼容性拉满：

var extraEl = document.querySelector("#suiteBarRight");
extraEl.style.padding = "10px";

var extraEl2 = document.querySelector("#suiteBarLeft");
extraEl2.style.display = "none";

var extraEl3 = document.querySelector("#welcomeMenuBox");
extraEl3.style.display = "none";

var extraEl4 = document.querySelector("#suiteBarButtons");
extraEl4.style.display = "none";

小提示 #

如果需要保留元素原来的内联样式，用cssText的时候可以拼接原样式，记得加个分号分隔：

extraEl.style.cssText += "; padding:10px;";

内容的提问来源于stack exchange，提问作者eia92