Change CSS class properties with jQuery
Solution 1
You can't change CSS properties directly with jQuery. But you can achieve the same effect in at least two ways.
Dynamically Load CSS from a File
function updateStyleSheet(filename) {
newstylesheet = "style_" + filename + ".css";
if ($("#dynamic_css").length == 0) {
$("head").append("<link>")
css = $("head").children(":last");
css.attr({
id: "dynamic_css",
rel: "stylesheet",
type: "text/css",
href: newstylesheet
});
} else {
$("#dynamic_css").attr("href",newstylesheet);
}
}
The example above is copied from:
Dynamically Add a Style Element
$("head").append('<style type="text/css"></style>');
var newStyleElement = $("head").children(':last');
newStyleElement.html('.red{background:green;}');
The example code is copied from this JSFiddle fiddle originally referenced by Alvaro in their comment.
Solution 2
In case you cannot use different stylesheet by dynamically loading it, you can use this function to modify CSS class. Hope it helps you...
function changeCss(className, classValue) {
// we need invisible container to store additional css definitions
var cssMainContainer = $('#css-modifier-container');
if (cssMainContainer.length == 0) {
var cssMainContainer = $('<div id="css-modifier-container"></div>');
cssMainContainer.hide();
cssMainContainer.appendTo($('body'));
}
// and we need one div for each class
classContainer = cssMainContainer.find('div[data-class="' + className + '"]');
if (classContainer.length == 0) {
classContainer = $('<div data-class="' + className + '"></div>');
classContainer.appendTo(cssMainContainer);
}
// append additional style
classContainer.html('<style>' + className + ' {' + classValue + '}</style>');
}
This function will take any class name and replace any previously set values with the new value. Note, you can add multiple values by passing the following into classValue: "background: blue; color:yellow"
.
Solution 3
Didn't find the answer I wanted, so I solved it myself:
modify a container div!
<div class="rotation"> <!-- Set the container div's css -->
<div class="content" id='content-1'>This div gets scaled on hover</div>
</div>
<!-- Since there is no parent here the transform doesnt have specificity! -->
<div class="rotation content" id='content-2'>This div does not</div>
css you want to persist after executing $target.css()
.content:hover {
transform: scale(1.5);
}
modify content's containing div with css()
$(".rotation").css("transform", "rotate(" + degrees + "deg)");
Solution 4
You can remove classes and add classes dynamically
$(document).ready(function(){
$('#div').removeClass('left').addClass('right');
});
Solution 5
$(document)[0].styleSheets[styleSheetIndex].insertRule(rule, lineIndex);
styleSheetIndex
is the index value that corresponds to which order you loaded the file in the <head>
(e.g. 0 is the first file, 1 is the next, etc. if there is only one CSS file, use 0).
rule
is a text string CSS rule. Like this: "body { display:none; }"
.
lineIndex
is the line number in that file. To get the last line number, use $(document)[0].styleSheets[styleSheetIndex].cssRules.length
. Just console.log
that styleSheet object, it's got some interesting properties/methods.
Because CSS is a "cascade", whatever rule you're trying to insert for that selector you can just append to the bottom of the CSS file and it will overwrite anything that was styled at page load.
In some browsers, after manipulating the CSS file, you have to force CSS to "redraw" by calling some pointless method in DOM JS like document.offsetHeight
(it's abstracted up as a DOM property, not method, so don't use "()") -- simply adding that after your CSSOM manipulation forces the page to redraw in older browsers.
So here's an example:
var stylesheet = $(document)[0].styleSheets[0];
stylesheet.insertRule('body { display:none; }', stylesheet.cssRules.length);
Related videos on Youtube
![Alvaro](https://i.stack.imgur.com/57uXe.jpg?s=256&g=1)
Comments
-
Alvaro almost 2 years
Is there a way to change the properties of a CSS class, not the element properties, using jQuery?
This is a practical example:
I have a div with class
red
.red {background: red;}
I want to change class
red
background property, not elements that have classred
background assigned.If I do it with jQuery .css() method:
$('.red').css('background','green');
it will affect the elements that right now have class
red
. Up to here everything is fine. But if I make an Ajax call, and insert more divs withred
class, those won't have a green background, they will have the initialred
background.I could call jQuery .css() method again. But I would like to know if there is a way to change the class itself. Please consider this is just a basic example.
-
ayyp almost 12 yearsI don't believe you can change the actual classes with jQuery.
-
Mr Griever almost 12 yearsI concur with Andrew Peacock, I know of no way to modify the actual css once loaded. However it seems trivial to perform update (changing the background from red to green) after changing an elements class.
-
bobobobo over 7 yearsYou may be able to manipulate the
<style>
element. See CSSStyleSheet.deleteRule and CSSStyleSheet.insertRule -
zontar almost 5 yearsAnother use case, in fact the one that brought me here, is to resize a popup window (actually, a series of DIV) according to the viewport, without using JS but just by assigning a certain class and then changing the class definition.
-
-
Community over 10 yearsThat's quite smart actually! You should include the code into your answer and remove the link ;)
-
Doug S over 10 yearsYes, please include the actual code, instead of linking (which can break and make this answer useless).
-
Mathew Wolf about 10 yearsOkay, sorry for linking :)
-
Tertium over 9 yearseven shorter: $("head").append('<style id="style_changer" type="text/css"></style>'); and later in code: $('#style_changer').html('.red{background:green;}');
-
lindon fox about 9 yearsAs far as I can see, unlike this answer you are only appending and not replacing the values...
-
Kenny Evitt almost 9 yearsThere's nothing wrong with linking to the original source (and lots that's right) if you didn't write this code yourself.
-
kEnobus almost 8 yearsThanks! Excellent work. 2 tiny details from my IDE's syntax highlighter: 1. Remove var from
var cssMainContainer = $('<div id="css-modifier-container"></div>');
2. Add var to:classContainer = cssMainContainer.find('div[data-class="' + className + '"]');
-
Pierre-Antoine Guillaume over 6 yearsHi ! A tiny -1 because I don't see the point of using
$(document)[0]
in place ofdocument
. -
Benny Schmidt over 6 years@PierreAntoineGuillaume Hi.
document
is wrapped in thejQuery/$
object because the person who asked the question specified how to do it using jQuery.$(element)
is not the same thing aselement
- jQuery converts the wrapped element to a set element that has access to jQuery's methods.$(element)[0]
is equivalent to$(element).get(0)
. This is explained in further detail at learn.jquery.com/using-jquery-core/jquery-object Happy moderating... -
Pierre-Antoine Guillaume over 6 yearsI didn't know of that, that's interesting. I can't remove the minus one if you don't edit, which kinda sucks
-
Pierre-Antoine Guillaume over 6 years"jQuery also has a method named .get() which provides a related function. Instead of returning a jQuery-wrapped DOM element, it returns the DOM element itself. Alternatively, because the jQuery object is "array-like," it supports array subscripting via brackets: either case, firstHeadingElem contains the native DOM element.", so there is indeed no point in doing
$(document)[0].styleSheets[styleSheetIndex].insertRule(rule, lineIndex);
overdocument.styleSheets[styleSheetIndex].insertRule(rule, lineIndex);
-
barrypicker over 6 yearsHow well does this perform on a very large DOM? It seems any jQuery selector will take a long time since it has to sift through the large DOM...
-
Akhil Gupta over 5 yearsI'd like to add the I found this to be the easiest way to get a particular style sheet
$(`link[href="style.css"]`).prop("sheet");
It will always return the exact style sheet you want to edit, as the href/url are, ideally, always unique within a webpage Edit: though it will only work if the style sheet is loaded using<link>
-
Akhil Gupta over 5 yearsif using
<style>
assign it anid
and use$("#myStyle").prop("sheet");
instead, same can be done with<link>
-
TroniPM over 4 yearsThis solution "Dynamically Add a Style Element" was perfect to me. Thank you! And @Tertium upgrade was even better.
-
JoePC about 3 yearsOne liner for the 2nd part:
$("head").append('<style type="text/css">.red{background:green;}</style>');
Thanks, @Tertium