Changing CSS Pseudo-Element Styles Via JavaScript

Changing CSS pseudo-element styles via JavaScript

EDIT: There is technically a way of directly changing CSS pseudo-element styles via JavaScript, as this answer describes, but the method provided here is preferable.

The closest to changing the style of a pseudo-element in JavaScript is adding and removing classes, then using the pseudo-element with those classes. An example to hide the scrollbar:

CSS

.hidden-scrollbar::-webkit-scrollbar {
   visibility: hidden;
}

JavaScript

document.getElementById("editor").classList.add('hidden-scrollbar');

To later remove the same class, you could use:

document.getElementById("editor").classList.remove('hidden-scrollbar');

Changing pseudo-element style from javascript

Since pseudo-elements do not exist in the DOM, they cannot be accessed in Javascript.
The workaround is to create a <span> instead of using :before and the same logic has to be applied.

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

You could also pass the content to the pseudo element with a data attribute and then use jQuery to manipulate that:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).attr('data-content','bar');
});

In CSS:

span:after {
    content: attr(data-content) ' any other text you may want';
}

If you want to prevent the 'other text' from showing up, you could combine this with seucolega's solution like this:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).addClass('change').attr('data-content','bar');
});

In CSS:

span.change:after {
    content: attr(data-content) ' any other text you may want';
}

How to change css pseudo-element through javascript?

Well I finally did it, I don't know if what I did is good programming but anyway it works, I needed to add a css rule so by doing this:

document.styleSheets[0].insertRule('input[type=range]::-webkit-slider-thumb 
{ background-color:' + color + ' !important; }', 0);

I was able to finally manipulate the pseudo-element (at least in chrome, next step other major browsers).
Anyway I think this is helpful to someone who wants to try something like this, I needed to search and tried many things to do this.

Thanks to everyone who tried to help me.

Dynamically styling pseudo-elements using jQuery or Javascript

May I suggest doing like this, where you dynamically create a style element (with a unique id so you can access it over and over) and just update a rule repeatedly

Usage

loadStyle('p.clicker::after { margin-top: ' + calculated-value + 'px; }');

Script

function loadStyle(css) {
  var style = document.querySelector('style[id="lastinbody"]') || document.createElement('style');
  style.id = 'lastinbody';
  style.type = 'text/css';
  if (style.styleSheet){
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
  document.querySelector('body').appendChild(style);
}

---

At this post of mine is a few more versions (which might be consider as a possible duplicate)

---

Related Topics