Javascript document.defaultView or 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，但是如果您想要创建一个应用于许多(以及将来!)元素的新规则，则需要创建一个动态样式表/规则并将其附加到.styleSheets集合。