javascript - 为什么用于编辑 DOM 的脚本控制台在 FireFox 中有效，但在 IE 11 中无效？

Question

我在使用控制台脚本在 IE 中编辑 DOM 时遇到了一些问题。

在Firefox中我可以进入控制台

var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++){
   divs[i].style = "display:block";
}

并且页面上的所有 div 都被赋予了适当的 block 样式。

然而，我的 IE11 控制台中的相同脚本对 DOM 没有影响，并向控制台报告 "display:block"。我知道代码正在查找 div，因为我可以在循环中放置一个 console.log() 并识别每个 div。

这是怎么回事？我对为什么什么都没有发生感到非常困惑，而且我所有关于使用 IE 的 f12 开发人员工具的搜索都没有提到 Javascript 不工作。事实上，文档说

The console not only displays output from code, but provides an interface to execute code as well. Just enter any valid JavaScript at the bottom of the Console, in the command line pane.

Answer 1

元素的 style 属性不是字符串，它是一个对象。如果浏览器允许您为其分配一个字符串并正确处理它，那么，它们就是在帮您一个忙。 :-)(他们时不时地像那样帮助我们。)

相反，分配给 style 对象的 display 属性:

divs[i].style.display = "block";

这是可靠的，跨浏览器的。唯一可以覆盖它的是您的 CSS 中的 !important 规则，您可能没有。

如果你真的想完全替换元素上的样式信息(而不是仅仅将display设置为block)，你可以通过setAttribute做到这一点:

divs[i].setAttribute("style", "display: block");

这也是可靠的跨浏览器。它会清除元素上的任何其他内联样式，仅用那个替换它们。