javascript - How to use jQuery to readwrite the values of an elements externally defined css class? - Stack Overflow

admin管理员组

文章数量:1321247

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.

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.

• javascript
• jquery
• css
• class

Share Improve this question Follow edited Jul 30, 2009 at 9:43 rism asked Jul 30, 2009 at 6:43 rismrism 12.1k1616 gold badges7979 silver badges122122 bronze badges 2

• O.k so Blixt is right. My blocking error after his advice is a damn typo ;) Whats wrong with this line? [Rhetorical] $(plate).css("background-image'", 'url(../images/rangeimmtab' + imgId + '.jpg)'); Should i delete the edit and this ment? Does it add any value for the next person? – rism Commented Jul 30, 2009 at 8:19
• Edit deleted as it offered no additional value. – rism Commented Jul 30, 2009 at 9:44

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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.

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");

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

本文标签：