爲什麼腳本控制檯編輯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給出相應塊造型。

但是，我的IE11控制檯中的相同腳本對DOM沒有影響，並向控制檯回報"display:block"。我知道代碼找到了div，因爲我可以在循環中放入一個console.log()並標識每個div。

那麼這是怎麼回事？我完全不知道爲什麼沒有任何反應，我所有使用f12 Developer Tools for IE的搜索都沒有提到Javascript無效。實際上，文檔中說

控制檯不僅顯示代碼的輸出，還提供了一個執行代碼的接口。只需在控制檯底部的命令行窗格中輸入任何有效的JavaScript即可。

Answer 1

元素上的style屬性不是字符串，而是對象。如果瀏覽器允許你爲它分配一個字符串並正確處理，那麼他們會幫你一個忙。 :-)（他們這樣做我們都傾向於這樣的，現在，然後。）

相反，分配給style對象的display屬性：

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

這是可靠的，跨瀏覽器。唯一可以覆蓋它的是你的CSS中的!important規則，這可能是你沒有的。

如果你真的想徹底取代元件上的樣式信息（而不是僅僅設置display至block），你可以做到這一點，通過setAttribute：

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

這也是可靠的跨-browser。它會清除元素上的任何其他內聯樣式，並用它替換它們。