javascript - Getting stylesheet object from ownerNode(style tag)

Question

I have a multiple style tags in my webpage, and i want to manipulate the cssRules in them. How can I get the styleSheet as in document.styleSheets object from a style element. A way could be scanning all the styleSheets in document.styleSheets and match its ownerNode with my style element object. Is there any better way that this?

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 界面（即带有 的界面cssRules）。

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

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

</script>