Is it possible to change a CSS pseudo-element style via JavaScript?
For example, I want to dynamically set the color of the scrollbar like so:
document.querySelector("#editor::-webkit-scrollbar-thumb:vertical").style.background = localStorage.getItem("Color");
and I also want to be able to tell the scrollbar to hide like so:
document.querySelector("#editor::-webkit-scrollbar").style.visibility = "hidden";
Both of these scripts, however, return:
Uncaught TypeError: Cannot read property 'style' of null
Is there some other way of going about this?
Cross-browser interoperability is not important, I just need it to work in webkit browsers.
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:
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.
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.
Looks like querySelector won't work with pseudo-classes/pseudo-elements, at least not those. The only thing I can think of is to dynamically add a stylesheet (or change an existing one) to do what you need.
Lots of good examples here: How do I load css rules dynamically in Webkit (Safari/Chrome)?
To edit an existing one which you don't have a direct reference to requires iterating all style sheets on the page and then iterating all rules in each and then string matching the selector.
Here's a reference to a method I posted for adding new CSS for pseudo-elements, the easy version where you're setting from js
Javascript set CSS :after styles
sheet.insertRule
returns the index of the new rule which you can use to get a reference to it for it which can be used later to edit it.If you're comfortable with some graceful degradation in older browsers you can use CSS Vars. Definitely the easiest of the methods I've seen here and elsewhere.
So in your CSS you can write:
Then in your JS you can manipulate that value on the #editor element:
Lots of other examples of manipulating CSS vars with JS here: https://eager.io/blog/communicating-between-javascript-and-css-with-css-variables/
An old question, but one I came across when try to dynamically change the colour of the content of an element's
:before
selector.The simplest solution I can think of is to use CSS variables, a solution not applicable when the question was asked:
Change the value in JavaScript:
The same can be done for other properties.