Question

当我们想要一种更可靠的方式来获取元素的样式时，我们使用

document.defaultView.getComputedStyle..

而不是

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

但是还有另一个，它是

document.styleSheets...

我是JS的新手，我今天刚刚阅读了document.styleSheets。我的问题是：

当我们想要获得一个样式属性（例如：color）时，我应该使用哪个？
什么是document.styleSheets？什么时候应该使用？

当我们想要添加如下所示的方法时：

// 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是加载到页面中的实际样式表或工作表的列表。有趣的事实：您可以动态创建新的“样式表”并将它们添加到此列表中，而无需实际加载单独的文件。

如果你正在查找元素的当前样式，你需要问的问题是，“我是否更关心样式SAYS的样式应该是什么，或者我更关心实际的当前（计算）样式是什么？”情况将决定哪个更合适。

如果您关心原始声明的样式，您将需要查阅样式表本身。但是，这比看起来要复杂得多，因为您将不得不解析文件并找到适用于相关元素的所有级联样式。

如果您关心当前计算的样式，getComputedStyle()比.style更可靠。

现在，要进行设置，如果要将样式规则直接应用于单个元素，则需要使用.style，但是如果要创建适用于许多（以及将来）的新规则！）元素，您需要创建动态样式表/规则并将其附加到.styleSheets集合。

Javascript document.defaultView或document.styleSheets？

1 个答案: