13

ドキュメントによると、この関数window.getComputedStyleは：hoverのような疑似クラスの計算されたスタイルを取得できるはずです。

別の質問の答えとしても説明されています

しかし、最後のコメントがその質問で述べているように、実際にはまったく機能せず、：hoverスタイルではなく、通常のスタイルを返すだけです。このjsfiddleで自分の目で確かめることができます。アラートは、緑色ではなく赤色を返します。

developer.mozilla.orgのドキュメントにも例がありますが、それも機能しません。ここを参照してください。

この質問では、回答者はコメントで、それはまったく機能しないと述べていますが、説明はしていません。

関数が正しい値を返す前に、スタイルシートを完全にレンダリングする必要があるのでしょうか？いくつかの遅延を設定しようとしましたが、何も機能しないようです。

最新のFirefox、Chrome、IEブラウザを試しました。この関数が期待どおりに機能しない理由を誰かが知っていますか？

4

2 に答える 2

14 
var style = window.getComputedStyle(element[, pseudoElt]);

ここで、pseudoEltは「一致する疑似要素を指定する文字列」です。疑似要素はまたはのような::beforeもの::afterで、CSSスタイルによって生成される要素です。:hover、:visitedまたは他の同様の効果は疑似クラスです。新しい要素は作成されませんが、要素に特殊なクラススタイルが適用されます。

少なくとも。を使用して、疑似クラスの計算されたスタイルを取得することはできませんgetComputedStyle。ただし、CSSルールをトラバースして適切なセレクターを見つけることはできますが、一部のブラウザーはDOM-Level-2-Styleルールに従わず、どちらをチェックする必要があるため、これを行うことはお勧めしません。ルールは特定の要素に影響します：

/* Style */
p a:hover{ color:yellow; background:black;}
p > a:hover{ color:green; background:white;}
p > a+a:hover{ color:fuchsia; background:blue;}

// JS
var i,j, sel = /a:hover/;
for(i = 0; i < document.styleSheets.length; ++i){
    for(j = 0; j < document.styleSheets[i].cssRules.length; ++j){    
        if(sel.test(document.styleSheets[i].cssRules[j].selectorText)){
            console.log(
                document.styleSheets[i].cssRules[j].selectorText,
                document.styleSheets[i].cssRules[j].style.cssText
            );
        }
    }
}

結果：
pa：ホバーカラー：黄色; 背景：なし繰り返しスクロール0％0％黒;
p> a：ホバーカラー：緑; 背景：なし繰り返しスクロール0％0％白;
p> a + a：ホバーカラー：フクシア; 背景：なし繰り返しスクロール0％0％青;

参照：

于 2012-07-15T21:15:28.470 に答える
2

少なくともリモートデバッグポートがオンになっているChromeではこれを行う方法があることに注意してください。基本的に、WebSocketを使用し、リモートデバッガーのURLに接続してから、次のコマンドを発行する必要があります。

send  { id: 1, method: "Inspector.enable" }
send  { id: 2, method: "DOM.enable" }
send  { id: 3, method: "CSS.enable" }
send  { id: 4, method: "DOM.getDocument" }
send  { id: 5, method: "DOM.querySelector", params: { nodeId: 1, selector: <<whatever you want>> } }
nodeId = response.result.nodeId
send  { id: 6, method: "CSS.forcePseudoState", params: { nodeId:, forcedPseudoClasses: [ "hover" <<or whatever>> ] } }

次に、通常のgetComputedStyleまたはCSS.getComputedStyleForNodeデバッガーAPIを使用できます。

于 2015-09-09T03:11:24.423 に答える