使用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'样式的引用，但似乎无法得到它。我可以这样做：

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

这给了我一个参考整个样式块。这是有道理的，但我怎么能得到单个选择器'＃东西 - 其他'？如果我这样做：

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

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

Answer 1

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

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

看styleNode.stylesheet或document.styleSheets，然后探索.cssRules。