Javascript document.defaultView或document.styleSheets？

Question

當我們想要一種更可靠的方式來獲取元素的樣式時，我們使用

document.defaultView.getComputedStyle..

代替

document.getElmById(x).style.color..

但是，還有另一個，那就是

document.styleSheets...

我是JS的新手，我今天才讀到有關document.styleSheets 。 我的問題是：

1. 當我們只想獲取一個樣式屬性（例如：color）時，應該使用哪個？
2. document.styleSheets是做什么用的？ 什么時候應該使用？

3. 當我們想添加如下所示的方法時：

    // it applies multiple properties elm.setStyle({ color: '#f00', marginLeft: x, opacity: 0.5, background: '#000 url(x.jpg) left top no-repeat' }); 

我應該使用哪個作為函數的基礎？

最后，感謝您的所有幫助！

Answer 1

document.styleSheets是加載到頁面中的一個或多個實際樣式表的列表。 有趣的事實：您可以動態創建新的“樣式表”並將其添加到此列表中，而無需實際加載單獨的文件。

如果要查找元素的當前樣式，則需要問的問題是：“我是否在乎樣式表應該說的樣式，還是我在乎實際的當前（計算）樣式是什么？” 該情況將確定哪個更合適。

如果您關心原始聲明的樣式，則需要查閱樣式表本身。 但是，這要比看起來復雜得多，因為您將不得不解析文件並找到適用於所討論元素的所有級聯樣式。

如果您關心當前的計算樣式是什么，則getComputedStyle()比.style更可靠。

現在，對於設置，如果您想將樣式規則直接應用於單個元素， .style使用.style ，但是如果您想創建一個適用於許多（以及將來！）元素的新規則，則d要創建動態樣式表/規則，並將其附加到.styleSheets集合。