Change CSS value dynamically with jQuery

问题

I have a div:

<div class="badger-left"></div>

This CSS:

/* Change style dynamically according to the bg-color attribute added to the div from jQuery */
.badger-change:after {
    background-color: attr(bg-color);
}

This jQuery to add an attribute and a class:

$('.badger-left').addClass('badger-change').attr('bg-color','red');

Since jQuery can't do :after like in CSS, I thought of this way, but it's failing. What should I try?

Thanks

Edit: The color would change dynamically from jQuery, it won't always be red.

回答1:

So, you can't pass it in to a color value because it will be interpreted as a string instead of a reference. You can pass in the content value to prove this point. On that note, you'll need to give your :after some layout, either with content or with some display or dimensions.

Here is a hacky workaround. I would personally refactor this to not use the pseudo style, but this will work with your current implementation:

function addStyle(color) {
    $('<style>.badger-left:after { background-color: ' + color + ';</style>').appendTo('head');
}

// example addStyle('red');

Working Demo: http://jsfiddle.net/3qK2G/

回答2:

How about just changing the class of .badger-left? So do something like this:

$('.badger-left').addClass('badger-red')
$('.badger-left').addClass('badger-blue')

with css like this:

.badger-red:after {
    background-color: red;
}

.badger-blue:after {
    background-color: blue;
}

回答3:

what you can do is to set background-color in .badger-change and have .badger-change:after inherit this value.

In .badger-change you need to set a background-color and hide it width a gradient over it.

DEMO (hover the div to see it in action)

---

DEMO 2 only change background-color without switching classes.

---

You can think of other method with inherit , like a background image of 1 pixel set hundreds of pixel away from screen in parent container and setted as repeat in pseudo-element.

回答4:

Establishing a color in your CSS prior to it being added would do the trick. Then changing that classes color later would change the badger-left with the new class badger-change

CSS

/* Change style dynamically according to the bg-color attribute added to the div from jQuery */
.badger-change {
    background-color: red;
}

jQuery

$('.badger-left').addClass('badger-change'); // As soon as we're loaded add badger-change class

$('#button').click(function(){ // When example button is clicked

    $('.badger-change').css('backgroundColor', 'blue'); // change badger-change background to blue

});

Here we are using a button for an example of changing the color.

HTML

<div class="badger-left">Hello World</div>
<input type="button" id="button" value="Change it" />

Some example content for badger-left for example.

When the page loads badger-left is given the new class badger-change with the BG being red. Then the button fires the jQuery to change that classes BG color to blue.

JSFiddle Example

来源：https://stackoverflow.com/questions/23162621/change-css-value-dynamically-with-jquery