Chrome zeigt mir die ::after und ::before Definitionen (und geerbte Definitionen etc ..) in der Matched CSS-Regeln Bereich, wenn ich ein Element inspizieren. Im Bereich Berechnete Stile werden jedoch nur die berechneten Stile für das Stammelement angezeigt.Ist es möglich, die "berechneten" Stile für :: after und :: before pseudo-Elemente zu überprüfen?

Ich habe eine ganze CSS-Klassenhierarchie für die Pseudo-Elemente mit einigen Eigenschaften geerbt und einige überschrieben etc, und würde gerne wissen, ob ich irgendwie die Reihe von Stilen sehen kann, die tatsächlich angewendet wurde Styles-Fenster für das Root-Element)

Wenn jemand etwas Licht auf dieses Thema werfen kann, wird das sehr hilfreich sein.

Bearbeiten - 13. Februar 2014

Neuere Versionen von Chrome hat in der Tat diese Funktion Built-in Vielleicht ist diese Fädchen mit ihnen etwas darunter, es zu tun hatte ?? :-)

Quelle

2012-12-16 techfoobar

Ja ist es, obwohl es nicht so offensichtlich ist. Wenn Sie Firebug verwenden, müssen Sie sicherstellen, dass auf der Registerkarte "Stil" die Option "Nur angewendete Stile anzeigen" ausgewählt ist. Dann, wie Sie aus der Abbildung unten sehen kann, sollte es möglich sein, die Pseudo-Elemente und sehen ihre berechneten Styling auszuwählen (oder das Styling, die angewendet wird), die berücksichtigt jegliche Überschreibungen usw.

Computed styles

Quelle

2012-12-17 15:58:13 jezzipin

einfach realisiert werden Sie Chrome verwenden, obwohl so wahrscheinlich die Antwort ist nein. – jezzipin

Ich benutze beide Browser, obwohl ich Chrome mehr benutze. Das Problem ist, dass ich das Pseudo-Element im Browser nicht 'auswählen' kann, da sie nicht Teil des DOM sind [und daher nicht als Argument an getComputedStyle()] übergeben werden können. Ich kann nur das Wurzelelement auswählen, an das ich die Pseudoelemente angehängt habe. Wie auch immer, danke für den Zeiger. – techfoobar

Dies kann bereits in Chrome Web Inspector getan werden. –

`window.getComputedStyle(element[, pseudoElt])`

pseudoElt Optional

Ein String, der die Pseudo-Element spezifiziert übereinstimmen. Muss für reguläre Elemente weggelassen werden (oder null). Pseudo-Klassen können wie folgt angegeben werden: "Fokus".

Ich missverstanden möglicherweise, was Sie erreichen möchten, aber hier ist ein bisschen JavaScript zum Spielen. Ich hoffe es ist nützlich.

Es iteriert durch jedes Element im Dokument und versucht, die content seiner :before s und :after s zu erhalten.
Wenn es eine findet, gibt es die Details an die console aus.
Einfach, aber nachweisbar.

document.querySelectorAll("*").forEach((e) => { 
 
    const ebc = window.getComputedStyle(e, ":before").content, 
 
     eac = window.getComputedStyle(e, ":after").content; 
 
    if (ebc || eac) { 
 
    console.log(e); 
 
    console.log((ebc ? "Before content = " + ebc : "No :before content")); 
 
    console.log((eac ? "After content = " + eac : "No :after content")); 
 
    } 
 
});

div:before { 
 
    content: "This is a test."; 
 
} 
 
p:after { 
 
    content: attr(data-content); 
 
} 
 
span:after { 
 
    content: " dolor"; 
 
}

<div> 
 
    <p data-content="&hellip;">Lorem <span>ipsum</span></p> 
 
</div>

Quelle

2012-12-20 10:43:28

Ist es möglich, die "berechneten" Stile für :: after und :: before pseudo-Elemente zu überprüfen?

Antwort

window.getComputedStyle(element[, pseudoElt])

Verwandte Themen

`window.getComputedStyle(element[, pseudoElt])`