使用querySelector（...）引用样式块中的选择器

Question

我希望在样式块中获得对选择器的引用，以便我可以克隆它并将其放在dom的另一个区域中的单页应用程序中。

我有下面的代码代表一个简单的按钮式div。

<style>
#generate-btn {
    border: 5px solid red;
    padding: 3px;
}
#something-else {
    padding: 6px;
}
</style>


<div id="generate-btn">
    <img src="img/btn_dark_background.png" />
</div>

我希望能够引用“＃something-else＆＃39;样式块中的样式但似乎无法得到它。我能做到：

 var styleNode = iframeDoc.querySelector("style");

这给了我一个整个样式块的引用。这是有道理的，但我怎样才能获得单一选择器＆＃39;＃something-else＆＃39;？如果我这样做：

var styleNode = iframeDoc.querySelector("#something-else");

我得到一个空值。是否可以获得对选择器的引用？ （普通JS请回答，没有jquery）。

Answer 1

querySelector找到元素，而不是样式表的一部分。

您正在寻找CSSOM，它会为您提供代表样式表部分的对象。

查看styleNode.stylesheet或document.styleSheets，然后浏览.cssRules。