How to change css pseudo-element through javascript?

Question

My webpage randomly generates a color, and some elements, like inputs, get colors generated as border or so through javascript. Something like this:

document.getElementById('input').style.color = color;

The thing is I want a thumb from <input type="range" /> to get the random color generated and I don't know how to do it, tried and searched the web without finding a solution to get this css style input[type=range]::-webkit-slider-thumb in javascript.

Can anyone help me please? Thanks in advance.

Pseudo elements cannot be changed via javascript.. You will have to use JQuery `addClass` and `removeClass` — imbondbaby, Aug 14 '14 at 22:12
Nooooooo! thanks @imbondbaby, my worst fears came true. At least I don't need to search more — Francisco Costa, Aug 14 '14 at 22:14
possible duplicate of [Change CSS with Javascript (jQuery)](http://stackoverflow.com/questions/17509263/change-css-with-javascript-jquery) — AstroCB, Aug 14 '14 at 22:19
you can always add a `style` block to your head with javascript, which can target the pseudo elements. — Pevara, Aug 14 '14 at 22:20
I already read that, but I don't need to get their properties, I want to change their property, thanks anyway for trying @joshhunt . — Francisco Costa, Aug 14 '14 at 22:21
Oh ok, your question makes it sound like you just need to get it. — joshhunt, Aug 14 '14 at 22:22
@imbondbaby so if it cannot be done via javascript, then how does jquery does it.... — worenga, Aug 14 '14 at 22:22
@mightyuhu Sorry couldn't edit my comment it can be done in both by adding and removing class — imbondbaby, Aug 14 '14 at 22:23
See [Setting CSS pseudo-class rules from JavaScript](http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript). It's the same for pseudo-elements. — Oriol, Aug 14 '14 at 22:24
basically this is bad software design. you should have no need to query the pseudo selector from javascript. do you need the value of the range input? — worenga, Aug 14 '14 at 22:27
@AstroCB no, my question it's not answered in that question, but thanks anyway... — Francisco Costa, Aug 14 '14 at 22:45

imbondbaby · Answer 1 · 2014-08-14T22:19:59.067

1

The simplest way to change the style of a pseudo-element is by adding and removing classes in JavaScript or JQuery. Here is an example:

CSS:

.newClass::-webkit-slider-thumb{
    color:red;
}

JS Solution:

To add class:

document.getElementById("selector").classList.add('newClass');

To remove class:

document.getElementById("selector").classList.remove('newClass');

JQuery Solution:

To add class:

$("#selector").addClass("newClass");

To remove class:

$("#selector").removeClass("newClass");

edited Aug 14 '14 at 22:19

answered Aug 14 '14 at 22:14

imbondbaby

6,351
3
21
54

So using this how can I add my js variable 'color' to this new class? – Francisco Costa Aug 14 '14 at 22:34
Thanks anyway you gave me hope @imbondbaby. – Francisco Costa Aug 14 '14 at 22:39

score 1 · Accepted Answer · answered Aug 14 '14 at 23:58

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 css pseudo-element through javascript?

2 Answers2