How to use jQuery to read/write the values of an elements externally defined css class?

Question

I have a div in an html file defined as follows:

<div id="rangeTabAll"></div>

In an externally defined style sheet I define the following style.

#rangeTabAll{
    top:45px;
    left:124px;
    width:186px;
    height:114px;
    display:none;
    background:#ffffff url(../images/rangetab0.jpg) no-repeat;
}

How do i read/write the background value using jQuery? The

$('#rangeTabAll').css('background')

method wont work because its not an inline style. And

$('#rangeTabAll').attr('class')

is undefined.

I can do this with javascript quite simply but i wonder how its done via jQuery.

Answer 1

background is a "magic" CSS property that is expanded to all the different background-* properties, such as background-image, background-color, background-repeat...

To get them in jQuery you would call $('#rangeTabAll').css('backgroundColor') and so on. Note the camelCase instead of separating the words with dashes.

I just noticed that jQuery converts background-color to backgroundColor etc. for you, so you won't have to worry about that. You can do $('#rangeTabAll').css('background-color') as well.

Answer 2

remember:

Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: $(elem).css('marginTop') and $(elem).css('marginRight'), and so on.

from jQuery Documentation: CSS

in your example, the shorthand background is not supported, you need to write the full property.

for

#rangeTabAll {
    top:45px;
    left:124px;
    width:186px;
    height:114px;
    display:none;
    background:#ffffff url(../images/rangetab0.jpg) no-repeat;
}

you would write:

$("#rangeTabAll").css("backgroundColor", "myNewValue");
$("#rangeTabAll").css("backgroundImage", "myNewValue");
$("#rangeTabAll").css("backgroundRepeat", "myNewValue");

or

$("#rangeTabAll").css("background-color", "myNewValue");
$("#rangeTabAll").css("background-image", "myNewValue");
$("#rangeTabAll").css("background-repeat", "myNewValue");

Answer 3

Why not define your alternate background as a CSS class and use $('#rangeTabAll').addClass('alternate') and $('#rangeTabAll').removeClass('alternate')?