Change CSS value dynamically with jQuery

Question

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 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
– Eric Bishard, Commented Apr 20, 2014 at 13:51

SeanCannon · Accepted Answer · 2014-04-18 21:51:19Z

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

answered Apr 18, 2014 at 21:51

SeanCannon

78.1k17 gold badges126 silver badges145 bronze badges

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

Comments

Richard · Accepted Answer · 2014-04-18 21:33:44Z

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

answered Apr 18, 2014 at 21:33

Richard

1,1381 gold badge6 silver badges11 bronze badges

2 Comments

Dan P. Over a year ago

Hi, sorry I didn't specify it -- the color will change dynamically from jQuery, and there can be many different colors. If I can't get the color form the attr 'bg-color', I guess I can just add multiple cs classes.

G-Cyrillus Over a year ago

@DanyP Check my example , instead switching class , just switch bg-color codepen.io/gc-nomade/pen/wtnxa or without classes , just bg codepen.io/gc-nomade/pen/qxFIC

G-Cyrillus · Accepted Answer · 2014-04-18 21:45:47Z

2

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.

edited Apr 18, 2014 at 21:45

answered Apr 18, 2014 at 21:33

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

Comments

WASasquatch · Accepted Answer · 2014-04-18 21:45:55Z

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.

Collectives™ on Stack Overflow

Change CSS value dynamically with jQuery

4 Answers 4

Comments

2 Comments

Comments

CSS

jQuery

HTML

JSFiddle Example

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

CSS

jQuery

HTML

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related