Changing CSS pseudo-element styles via JavaScript [duplicate]

Answer 1

You can't apply styles to psuedo-elements in JavaScript.

You can, however, append a <style> tag to the head of your document (or have a placeholding <style id='mystyles'> and change its content), which adjusts the styles. (This would work better than loading in another stylesheet, because embedded <style> tags have higher precedence than <link>'d ones, making sure you don't get cascading problems.

Alternatively, you could use different class names and have them defined with different psuedo-element styles in the original stylesheet.

Answer 2

I posted a question similar to, but not completely like, this question.

I found a way to retrieve and change styles for pseudo elements and asked what people thought of the method.

My question is at Retrieving or changing css rules for pseudo elements

Basically, you can get a style via a statement such as:

document.styleSheets[0].cssRules[0].style.backgroundColor

And change one with :

document.styleSheets[0].cssRules[0].style.backgroundColor = newColor;

You, of course, have to change the stylesheet and cssRules index. Read my question and the comments it drew.

I've found this works for pseudo elements as well as "regular" element/styles.