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.