Let's say you want to change the width of many elements, to simulate a table, for example. I realize you could do this:

$(".class").css('width', '421px');

This alters the inline style='width: 421px;' attribute for each element. Now, what I'd LIKE to do: is change the actual CSS rule definition:

.class {
    width: 375px;  ==[change to]==> 421px;
}

When it es to 100's if not 1000's of nested <ul> and <li> that need to be changed, it seems like this would be better for performance than trying to let jQuery do the work through the .css() method.

I've found this example - this IS what I'm trying to do:

var style = $('<style>.class { width: 421px; }</style>')
$('html > head').append(style);

I'm NOT trying to swap classes ($el.removeClass().addClass()), because I can't have a class for EVERY optimal width (379px, 387px, 402px..).

I could create a <style> element and dynamically set the width, however I'm thinking there's a better way.

Let's say you want to change the width of many elements, to simulate a table, for example. I realize you could do this:

$(".class").css('width', '421px');

This alters the inline style='width: 421px;' attribute for each element. Now, what I'd LIKE to do: is change the actual CSS rule definition:

.class {
    width: 375px;  ==[change to]==> 421px;
}

When it es to 100's if not 1000's of nested <ul> and <li> that need to be changed, it seems like this would be better for performance than trying to let jQuery do the work through the .css() method.

I've found this example - this IS what I'm trying to do:

var style = $('<style>.class { width: 421px; }</style>')
$('html > head').append(style);

I'm NOT trying to swap classes ($el.removeClass().addClass()), because I can't have a class for EVERY optimal width (379px, 387px, 402px..).

I could create a <style> element and dynamically set the width, however I'm thinking there's a better way.

• javascript
• jquery
• css

• 2 I really think you should write two classes in your CSS, and add/remove the appropriate ones when needed. You should not mess with your stylesheet in JS, it will quickly bee unmaintainable. – kapa Commented Feb 9, 2012 at 21:48
• @kapa, this has its limits, because all the CSS has to be defined in advance. You could not, for example, highlight arbitrary nth-child elements: #root>div:nth-child('+Nth+') { background: red; } – wu-lee Commented Jan 19, 2018 at 11:33

2 Answers 2

document.styleSheets[0].addRule works in Chrome, 'not a function' in FF

What works for me is to include an empty style block in the header:

<style id="custom-styles"></style>

And then manipulate that with something like this:

$('#custom-styles').text('h1 { background: red }')

I've tested this appears to work in current version of Chrome (well, Chromium - 63.0) and Firefox (57.0.4).