How to switch between 2 CSS colors with jQuery?

Question

I want a string of text to change color from default to #c30 when I click a button somewhere on the page, and it changes back to default when I click the button again.

My code looks like this:

$("#button").click(function() {
    var anno = $(#text);
    if (anno.css('color') == '#c30') {
        anno.css('color', '');
    } else {
        anno.css('color', '#c30');
    }

});

But it doesn't seem to work on FF3. Works in IE though. Any idea?

You can't check the current color of an element and expect a HEX value. In most browsers an RGB representation will be returned, so instead of '#C30' you'll get: 'rgb(204, 51, 0)' — James
– James, Commented Apr 25, 2009 at 9:16
Do not test against an RGB colour value either though, as you cannot guarantee any particular format across browsers. — Alex Barrett
– Alex Barrett, Commented Apr 25, 2009 at 11:14
if you do an alert(anno.css('color')); you will see different results in different browsers, so you can't do a text compare. — databyss
– databyss, Commented Jul 22, 2009 at 19:15

Quentin · Accepted Answer · 2009-04-25 08:39:56Z

7

I would try to separate the presentational details as much as possible, i.e. change the classes to which the element belongs, and leave the colour information in a separate stylesheet.

$("#button").click(function() {
        $("#text").toggleClass('somethingDescriptive');
});

answered Apr 25, 2009 at 8:39

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

Comments

Chad Grant · Accepted Answer · 2009-04-26 02:09:16Z

0

If you use named colors, this will work.

$("#button").click(function(){
      $("#text").css('color', $("#text").css('color') == 'white' ? 'black' : 'white');    
});

Hex values do not.

This is a bad way to do it anyways, I agree with the most voted up answer here. So I have updated my answer after some research.

<style type="text/css">
     .color1 { color:#fff; }
     .color2 { color:#000; } 
</style>
<script>
    $("#button").click(function(){
          $("#text").toggleClass('color1').toggleClass('color2');
    });
</script?

<div class="color1">Text</div>

edited Apr 26, 2009 at 2:09

answered Apr 25, 2009 at 8:26

Chad Grant

45.6k10 gold badges67 silver badges80 bronze badges

3 Comments

James Over a year ago

jQuery doesn't need to "know" anything - it directly applies the color you specify to the appropriate property; therefore, short HEX values are okay to use.

James Over a year ago

Also, the computed style returned from the 'css' method will rarely return the HEX value of the colour. For example, say you apply #FFFFFF to an element; when you try retrieving it you'll get rgb(255, 255, 255) ...

Chad Grant Over a year ago

@JimmyP Not always true, it does not return the computed style when using named colors for example. If you view the source of jQuery in SVN, you will see that computedStyle is the last thing taken into account. Try this out to see $(function() { $(".colorMe").css('color', 'red'); alert($(".colorMe").css('color')); } I don't change things like this anymore anyways, add/removeClass is a better way to switch styles

Thinker · Accepted Answer · 2009-04-25 08:27:51Z

-1

The color #c30 is converted to #cc3300 - that's why it is not working.

answered Apr 25, 2009 at 8:27

Thinker

14.5k9 gold badges42 silver badges56 bronze badges

Collectives™ on Stack Overflow

How to switch between 2 CSS colors with jQuery?

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related