Updating a CSS attribute using jQuery

Question

Suppose I have the following html:

...
<div class="thinger">...</div>
<div class="thinger">...</div>
<div class="thinger">...</div>
...

I want to dynamically set the width of all of the thinger divs. I know that I can do it like this:

$(".thinger").css("width",someWidth);

This will result in html that looks like this:

<div class="thinger" style="width: 50px;">...</div>
<div class="thinger" style="width: 50px;">...</div>
<div class="thinger" style="width: 50px;">...</div>

I would prefer to have the resulting HTML look like this:

...
<style>
    .thinger {
        width: 50px;
    }
</style>
...
<div class="thinger">...</div>
<div class="thinger">...</div>
<div class="thinger">...</div>
...

I looked around but didn't see a jQuery utility to add/update/modify existing css classes. Does this exist?

I know that I could add it manually using something like this:

var styleElement = document.createElement('style');
styleElement.type = "text/css";
styleElement.innerHTML = ".thinger {width:" + maxWidth + ";}";
document.getElementsByTagName('head')[0].appendChild(styleElement);

But I don't want to have to deal with browser inconsistencies and I want to make sure I am doing things "the jQuery way". Any reason to choose one method over the other?

Is it not possible to simply write the class in CSS, and then use jQuery's .addClass("thinger") ? — Praxis Ashelin
– Praxis Ashelin, Commented Feb 4, 2015 at 15:49
u can create classes with specific properties ,and toggle them with jquery , a clean way without cluttering the html. — ctf0
– ctf0, Commented Feb 4, 2015 at 15:49
I'm pretty sure if you want to apply a style to an element using jQuery. You need to write it as the following: .css ({'width':someWidth}); — bashleigh
– bashleigh, Commented Feb 4, 2015 at 16:02

Rory McCrossan · Accepted Answer · 2015-02-04 15:49:09Z

2

You can create the style element and append it to the head as you would any other element in the DOM, however it's a waste of time.

The best method to use would be to setup your class rule in a stylesheet and add the class to those elements. This maintains a better separation of concerns which is beneficial for both code reuse and maintenance later on.

I can't setup the class rule in a stylesheet because I don't know what the width will be prior to runtime.

In this case the current method you have of using css() is the best available.

answered Feb 4, 2015 at 15:49

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sixtyfootersdude Over a year ago

I can't setup the class rule in a stylesheet because I don't know what the width will be prior to runtime. I am trying to get all of my divs to be the width of the largest div.

sixtyfootersdude Over a year ago

thanks for the update. Can you expand on:

You can create the style element and append it to the head as you would any other element in the DOM, however it's a waste of time.

. Why is this a waste of time?

Rory McCrossan Over a year ago

Because it's a lot of code (relatively) compared to the css() call which is a single method.

Gildas.Tambo · Accepted Answer · 2015-02-04 15:50:01Z

1

Well that is a whole process read Add Rules to Stylesheets with JavaScript

answered Feb 4, 2015 at 15:50

Gildas.Tambo

22.7k7 gold badges53 silver badges79 bronze badges

3 Comments

Rory McCrossan Over a year ago

You know the code that OP has int he question is already doing this, right?

sixtyfootersdude Over a year ago

Thanks, this is what I was looking for. Do you know if JQuery has a wrapper built in so that I don't need to deal with insertRule vs addRule?

Gildas.Tambo Over a year ago

@sixtyfootersdude for jquery i don't have any inputs sorry

SavoryBytes · Accepted Answer · 2015-02-04 16:17:22Z

Interesting question, it would be good to test if there is any performance benefit for using one approach over the other.

$("<style>.thinger{width:" + maxWidth + ";}</style>").appendTo("head");

If you need to update the value over time you should not keep appending new style tags to the page. Instead you'd want to update the existing one with something like this:

http://jsfiddle.net/daniellmb/0u5ffasq/

$('button').click(function(e) {
    // get the dynamic width setting
    var maxWidth = $(e.target).text(),
        newRule = '.thinger{width:' + maxWidth + ';}';
        styleTag = $('#thinger-style');

    if (styleTag.length) {
        // update existing
        styleTag.text(newRule);
    } else {
        // create for the first time
        $('<style id="thinger-style">' + newRule + '</style>').appendTo("head");
    }
});

Caner Akdeniz · Accepted Answer · 2015-02-04 15:50:21Z

0

Yes there is. You can add or remove classes with jQuery .addClass() and .removeClass() methods.

$('#myDiv').addClass('myFirstClass');

or

$('#myDiv').removeClass('myFirstClass');

You can also use .css() method to update the css of an element like:

$('.myFirstClass').css('width','100px');

answered Feb 4, 2015 at 15:50

Caner Akdeniz

1,86214 silver badges20 bronze badges

Collectives™ on Stack Overflow

Updating a CSS attribute using jQuery

4 Answers 4

3 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related