javascript - 从 ownerNode(style tag) 获取样式表对象

Question

我的网页中有多个 style 标签，我想操纵其中的 cssRules。如何从样式元素中获取 styleSheet 中的 document.styleSheets 对象。一种方法是扫描 document.styleSheets 中的所有 styleSheets 并将其 ownerNode 与我的 style 元素对象匹配。有没有更好的方法？

Answer 1

根据 http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-style-element ，样式元素实现了 LinkStyle界面，通过遵循引用可以引导一个人到 http://dev.w3.org/csswg/cssom/#the-linkstyle-interface这表明有一个 sheet您可以访问每个样式元素的属性(与 <link rel="stylesheet"> 一样)——只要它们是 text/css , 默认值。从那里您可以获得您正在寻找的更专业的 CSSStyleSheet 接口(interface)(即带有 cssRules 的接口(interface))。

<style>
  p {color:blue;}
</style>
<script>

  var h = document.getElementsByTagName('style')[0];
  alert(h.sheet.cssRules[0].cssText); // "p { color: blue; }"

</script>