0

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

document.defaultView.getComputedStyle..

代替

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

但是，还有另一个，它是

document.styleSheets...

我是 JS 的新手，我document.styleSheets今天才读到。我的问题是：

  1. 当我们只想获得一个样式属性（例如：颜色）时，我应该使用哪个？
  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'
});

我应该使用哪个作为函数的基础？

最后，感谢大家的帮助！

4

1 回答 1

0

document.styleSheets是加载到页面中的实际样式表或工作表的列表。有趣的事实：您可以动态创建新的“样式表”并将它们添加到此列表中，而无需实际加载单独的文件。

如果您正在查找元素的当前样式，您需要问的问题是，“我更关心样式表所说的样式应该是什么，还是我更关心实际的当前（计算）样式是什么？” 具体情况会决定哪个更合适。

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

如果您关心当前计算的样式是什么，getComputedStyle()那么.style.

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

于 2013-06-05T03:54:51.867 回答