admin管理员组

文章数量:1279043

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.

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.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Apr 18, 2014 at 21:38 Dan P. asked Apr 18, 2014 at 21:25 Dan P.Dan P. 1,77544 gold badges2929 silver badges5757 bronze badges 2

• codepen.io/gc-nomade/pen/qxFIC :) is that fine ? – G-Cyrillus Commented Apr 18, 2014 at 21:49
• I like the answers here, it shows some different schools of thought for tackling this problem and I know that you may not be able to implement SASS into your project, but I'm just wondering if this would be made a lot easier if you were using SASS to create the css. – Eric Bishard Commented Apr 20, 2014 at 13:51

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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/3qK2G/

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

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.

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

本文标签： javascriptChange CSS value dynamically with jQueryStack Overflow