CODEWITHSUNDEEP
javascriptcssselector
Cindy
Cindy

Reputation: 105

Change specified style via css/javascript?

I know this is an old question, and similar questions (solved) are even more complicated. But I've tried and couldn't figure it out myself.

I have

<div style="color:white; padding:10px">Text</div>

I want to change its color to red:

div[style*="color:white"]{color:red}

$('div').filter(function() {
    return $(this).css('color') == 'white';
}).css("color", "red");

I tried both css and javascript, with or without whitespace, use either hex or RGB color code.

Upvotes: 1

Views: 95

Answers (5)

pktangyue
pktangyue

Reputation: 8524

In JQuery API document of .css(), the following sentence is written.

"Different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255)."

So, I think the simply return $(this).css('color') == 'rgb(255, 255, 255)'; may also has some problem in the future.

And here I suggest use css class to implement it as the following:

.white{color:white;}
.red{color:red;}

$('div').filter(function() {
    return $(this).hasClass('white');
}).removeClass('white').addClass('red');

And why div[style*="color:white"]{color:red} does not work, this is because inline css has the highest priority out of the three ways.

Upvotes: 1

Julian Krispel-Samsel
Julian Krispel-Samsel

Reputation: 7734

You're doing something very funky there, the filter function shouldn't be used like that. To select a dom element and change its css with jquery do this $('div').css({'color': 'red'});

Here's a working example

For a proper introduction to jquery I'd recommend this video by the amazing Chris Coyer

Upvotes: 0

The Alpha
The Alpha

Reputation: 146191

Actually $(this).css('color') returns rgb(255, 255, 255) so you can use

$('div').filter(function() {
    return $(this).css('color') == 'rgb(255, 255, 255)';
}).css("color", "red");

Example.

Upvotes: 2

Apropos
Apropos

Reputation: 516

The issue is that it's not returning what you're expecting. It's actually returning an RGB string rgb(255, 255, 255), rather than 'white'. Change that and you're golden.

Example JSFiddle

Upvotes: 3

djthoms
djthoms

Reputation: 3096

Inline CSS takes over any internal or external stylesheet. If you have the ability to remove the inline css on that particular element and replace it with something like <div class="myElememt"></div> that would be ideal. As for using jQuery I got it to change by using the CSS method without the filter:

$('div').css('color', 'blue');

Upvotes: 0

Related Questions