Change the :before selector from javascript
No, you cannot access :before
or :after
from javascript, because they are not a part of the DOM. However you can still achieve your goal by using CSS classes:
<script>
document.getElementById('abc').className = "minus";
</script>
<style>
#abc:before {content: "+";}
#abc.minus:before {content: "-"}
</style>
In fact this approach is more unobtrusive, because you don't mix representation with javascript. Tomorrow you might want to change text "+/-" to say nice background images, in this case you don't have to touch javascript code at all.
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';
}
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 change content value of pseudo :before element by Javascript
Update (2018): as has been noted in the comments, you now can do this.
You can't modify pseudo elements through JavaScript since they are not part of the DOM. Your best bet is to define another class in your CSS with the styles you require and then add that to the element. Since that doesn't seem to be possible from your question, perhaps you need to look at using a real DOM element instead of a pseudo one.
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
Manipulate CSS before selector with jQuery
You can't change the style of pseudo elements with javascript, but you could add a <span>
inside of your .className
and then target that.
$('.className span').css('background-color', bgColor);
Related Topics
What Is <Router-View :Key="$Route.Fullpath">
Check If Window Is Already Open Window.Open
How to Set Mousemove Update Speed
Changing Data Content on an Object Tag in HTML
Determine Maximum Possible Div Height
JavaScript - Check If String Is Valid CSS Color
Google Chrome Copy CSS Path in Developer Tools
How to Detect When a New Element Has Been Added to the Document in Jquery
How to Add a List of Images to the Document from an Array of Urls
Issue with Comparing Two Numbers in JavaScript
Google Maps Zoom Control Is Messed Up
How to Set Active Class to Nav Menu from Twitter Bootstrap
Duplicating an Element (And Its Style) with JavaScript
CSS Position Absolute Making the Textbox Go Down
Trigger Event Using Jquery on CSS Change
Setting Multiple Style.Background Values