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?

Answer 1

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.

Answer 2

好吧，这是整个过程，请阅读使用JavaScript向样式表添加规则

Answer 3

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");
    }
});

Answer 4

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');