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> 

私はスタイルブロック内の「＃何か、他の」スタイルへの参照を取得できるようにしたいが、それを得るように見えることはできません。私はできる：

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

これは私にスタイルブロック全体への参照を与える。それは理にかなっていますが、どのようにして '＃something-else'という単一のセレクタを得ることができますか？私がしている場合：

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

私はNULL値を取得します。セレクタへの参照を取得することは可能ですか？ （Plain JSは答えます、jqueryはありません）。

Answer 1

querySelectorは、スタイルシートの一部ではなく要素を検索します。

CSSOMを探しています。これは、スタイルシートの各部分を表すオブジェクトを提供します。

styleNode.stylesheetまたはdocument.styleSheetsを参照してから、.cssRulesを検索してください。