Changing Pseudo-Element Style from 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.

How to change a Pseudo-class style through JavaScript?

I would use a different set of rules with an additional class

<html>
<head>
  <style type='text/css'>
    #myBtn {
      background-color: red;
    }
    #myBtn:hover {
      background-color: blue;
    }
    #myBtn.changed {
      background-color: green;
    }
    #myBtn.changed:hover {
      background-color: yellow; /* or whatever you want here */
    }
</head>

And then

<script type="application/x-javascript">
      function ChangeColor() {
         var btn = document.getElementById('myBtn');
         btn.className = "changed";
      };
</script>

Of course, this makes only sense for one or a couple of different values you want to have for your color.

modify pseudo select :after in javascript

If that style comes from a CSS file, you'll have to search for it in document.styleSheets, which will be messy.

If you are open to dynamically creating a <style> element containing that CSS instead, you can modify it programmatically.

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