Pseudo-Elemente mit querySelector

Click me, Touch me

Bislang galt, dass Javascript nicht auf Pseudo-Elemente wie ::before und ::after zugreifen kann, weil sie nicht im DOM liegen. Javascript querySelector hat eine Lösung.

querySelector schafft dieses kleine Kunststück aber doch – mit etwas Hilfe von getComputedStyle. getComputedStyle und querySelector verhelfen Javascript aber nur einen lesenden Zugriff auf Pseudo-Selektoren.

var boxShadow = window.getComputedStyle (
    document.querySelector('.circle'), ':before'
).getPropertyValue('box-shadow');

querySelector wird von allen modernen Browsern unterstützt und sogar von IE8 – solange nur auf CSS-Selektoren zugegriffen wird, die von IE8 bereits unterstützt wurden.

Internet Explorer unterstützt getPropertyValue erst ab IE9. Wer IE8 noch mitziehen muss, setzt auf getAttribute, das eine ähnliche Funktionalität bietet.

Pseudo-Selektoren mit Javascript ändern

Es gibt zwar getComputedStyle, aber kein setComputedStyle. Javascript kann allerdings ein style-Element anlegen und das Pseudo-Element mit innerHTML füllen.

Farbe eingeben
<style>
.circle {
    position: relative;
    margin: 0 auto; overflow: hidden;
    width: 220px; height: 220px;
    transform: translateZ(0) }

.circle:before,
.circle:after {
    border-radius: 50%; 
    content:""; position: absolute;
    top: 0; left: 0; width: inherit; 
    height: inherit;            
    box-shadow: inset 150px 0 0 hsla(30,70%,50%,0.2), 
                inset 0 150px 0 hsla(30,70%,50%,0.2), 
                inset -150px 0 0 hsla(30,70%,50%,0.2), 
                inset 0 -150px 0 hsla(30,70%,50%,0.2);
    transition: box-shadow 0.75s }
</style>
…
<div class="circle cflex"></div>
…
<script>
var style = document.createElement('style');
style.innerHTML = 
    '.circle:before { box-shadow: inset 150px 0 0 hsla(180,70%,50%,0.2)';
document.querySelector('head').appendChild(style);
</script>

Das frisch gebackene style-Element wird ans Ende von head oder hinter die vorhandenen style-Tags oder Links zu CSS-Dateien gehangen, wo es die Original-Eigenschaften sicher überschreibt.

Mehr zu querySelector und Pseudo-Elementen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.