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.
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');
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.
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.
How do you add pseudo classes to elements using jQuery?
You can't force a certain pseudo-class to apply using jQuery. That's not how pseudo-classes (especially dynamic pseudo-classes) work, since they're designed to select based on information that cannot be expressed via the DOM (spec).
You have to specify another class to use, then add that class using jQuery instead. Something like this:
.element_class_name:hover, .element_class_name.jqhover {
/* stuff here */
}
$(this).addClass("jqhover");
Alternatively you could hunt for the .element_class_name:hover
rule and add that class using jQuery itself, without hardcoding it into your stylesheet. It's the same principle, though.
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
How to Prevent JavaScript Injection Attacks Within User-Generated Html
How to Create a Sticky Navigation Bar That Becomes Fixed to the Top After Scrolling
Html5 Canvas Camera/Viewport - How to Actually Do It
Set CSS Property in JavaScript
Scrollable Div to Stick to Bottom, When Outer Div Changes in Size
Access CSS Variable from JavaScript
What Is the Scope of Variables in JavaScript
For-Each Over an Array in JavaScript
Object Comparison in JavaScript
Open Popup and Refresh Parent Page on Close Popup
Dynamically Resizing Image-Maps and Images
Best Way to Obfuscate an E-Mail Address on a Website
Css Transition Doesn't Start/Callback Isn't Called
How to Access CSS Generated Content With JavaScript
Typeerror: $(...).Datatable Is Not a Function