ändern Pseudo auswählen: nach in Javascript

Question

I definiert haben eine CSS wie

.slidingTag li:after { 
    content: ''; 
    z-index: 3; 
    height: 6px; 
} 

Ich möchte die Höhe ändern dynamisch von JS zuzuschreiben. Ich kann die Eigenschaft mit

window.getComputedStyle(document.querySelector('.slidingTag'), 'li:after').getPropertyValue('height') 

bekommen Aber ich weiß nicht, wie man das Höhenattribut ändert. Ich habe versucht, setProperty zu verwenden, aber es scheint, dass es keine solche Funktion für Pseudo-Klassen gibt. Irgendwelche Ideen lassen mich wissen.

Answer 1

Wenn dieser Stil aus einer CSS-Datei stammt, müssen Sie in document.styleSheets danach suchen, was unordentlich wird.

Wenn Sie ein <style>-Element dynamisch erstellen können, das stattdessen das CSS enthält, können Sie es programmgesteuert ändern.

var slidingTagLiAfterStyle = document.createElement("style"); 
slidingTagLiAfterStyle.innerHTML = 
".slidingTag li:after { 
    content: ''; 
    z-index: 3; 
    height: 6px; 
    }"; 
document.head.appendChild(slidingTagLiAfterStyle); 

... 

slidingTagLiAfterStyle.innerHTML = slidingTagLiAfterStyle.innerHTML.replace(/height: [0-9]+px/, "height: 12px"); // or whatever you want to set it to 

Answer 2

Pseudo-Elemente wie: before und: after von CSS behandelt werden, nicht der DOM. Aus diesem Grund müssen Sie einen anderen Ansatz wählen.

Was Sie können tun ist die CSS-Regel für dieses Pseudo-Element verantwortlich, und ändern Sie das. Sie tun dies mit CSSOM, das eine ziemlich andere API ist, obwohl Sie zuerst vom DOM darauf zugreifen.

Im Gegensatz zum DOM haben CSS-Regeln keine IDs oder Klassennamen, nach denen sauber und schnell gesucht werden kann. Daher müssen wir die Liste der Stylesheets und Stilregeln durchsuchen. Das kann teuer sein, also wenn es möglich ist, nur einmal zu suchen, empfehle ich dringend, dass zu tun. Hier ist eine schnelle und unsaubere Art und Weise zu tun, dass:

function getRuleWithSelector(selector) { 
 
    var numSheets = document.styleSheets.length, 
 
    numRules, 
 
    sheetIndex, 
 
    ruleIndex; 
 
    // Search through the style sheets. 
 
    for (sheetIndex = 0; sheetIndex < numSheets; sheetIndex += 1) { 
 
    numRules = document.styleSheets[sheetIndex].cssRules.length; 
 
    for (ruleIndex = 0; ruleIndex < numRules; ruleIndex += 1) { 
 
     if (document.styleSheets[sheetIndex].cssRules[ruleIndex].selectorText === selector) { 
 
     return document.styleSheets[sheetIndex].cssRules[ruleIndex]; 
 
     } 
 
    } 
 
    } 
 
    // If we get this far, then the rule doesn't exist. 
 
    // So the return value is undefined. 
 
} 
 

 
var afterSlidingTagRule = getRuleWithSelector('.slidingTag li::after'); 
 
console.debug(afterSlidingTagRule); 
 
window.addEventListener('DOMContentLoaded', function() { 
 
    afterSlidingTagRule.style.fontSize = "10px"; 
 
}, false);

.slidingTag { 
 
    color: blue; 
 
} 
 
.slidingTag li { 
 
    color: green; 
 
} 
 
.slidingTag li:after { 
 
    content: "World"; 
 
    font-size: 32px; 
 
}

<ul class="slidingTag"> 
 
    <li class="selected">Hello</li> 
 
    <li>World</li> 
 
</ul>

Sobald Sie die Regel haben Sie brauchen, der Rest ist sehr ähnlich mit getComputedStyle zu arbeiten() oder mit Das Attribut style eines DOM-Elements. Das obige Snippet macht es in einem DOMContentLoaded-Event-Handler, aber Sie sollten es zu jedem Zeitpunkt tun können, sobald die Dinge geladen sind.

Es gibt ein paar Einschränkungen mit diesem Ansatz in Betracht gezogen werden:

• Wenn Sie eine CSS-Regel zu ändern, dass Veränderungen in jedem Element reflektiert wird, dass die Regel auswählt. Wenn Sie eine Regel haben, die viele Elemente betrifft, und Sie die Art ändern müssen, wie all diese Elemente aussehen, ist das großartig. Wenn Sie eine Regel haben, die viele Elemente betrifft, aber Sie nur das Aussehen eines dieser Elemente ändern müssen, ist das nicht so gut.
• Die CSSOM-Ansicht Ihres Auswahltextes entspricht möglicherweise nicht dem, was Sie geschrieben haben. Dies kommt in diesem Beispiel in der Tat, weil Ihr Selektor 10 lesen sollte (beachten Sie den zusätzlichen Doppelpunkt). Der Browser korrigiert dies, wenn er Ihr CSS analysiert, und das ist es, wonach CSSOM sucht.
• Nur weil eine Regel etwas sagt, bedeutet das nicht, dass das Element so angezeigt wird.Alles, was eine CSS-Regel außer Kraft setzen kann - elementspezifische Stile, spezifischere Regeln an anderer Stelle in der Gruppe, !important Deklarationen usw. - kann auch Ihre Änderungen überschreiben.
• Dies ist kein Ersatz für getComputedStyle(). Das folgt aus dem obigen: Wenn etwas die Darstellung eines Elements ändert, beeinflusst das nicht die zugrunde liegenden CSS-Regeln. Wenn überhaupt, es ist das Gegenteil von getComputedStyle(): statt bekommen, was ein Element derzeit Displays, es Sätze welche bestimmte Elemente sollte Anzeige (vorbehaltlich unvorhersehbarer Ereignisse).

Answer 3

Sie können eine Extraklasse für Sie Element hinzufügen, die eine andere Eigenschaft auf der :after haben, wie:

zuerst Sie haben dies:

HTML:

<div class="slidingTag"> 
    <li>lorem ipsum</li> 
</div> 

CSS:

.slidingTag li:after { 
     content: ''; 
     z-index: 3; 
     height: 6px; 
    } 

dann hast du dies:

Neue Klasse, die die Eigenschaft height außer Kraft gesetzt werden:

.slidingTag-modifier li:after { 
    content: ''; 
    z-index: 3; 
    height: 10px !important; 
} 

endgültige HTML:

<div class="slidingTag slidingTag-modifier"> 
    <li>lorem ipsum</li> 
</div> 

Um das zu tun mit Javascript:

var element = document.querySelector('.slidingTag'); 
//use this instruction wherever you want to add the new class that will override the property 
element.classList.add('slidingTag-modifier'); 
//works only on recent browsers 

Prost!