Как использовать jQuery для чтения / записи значений элементов, определенных извне класса css?

Question

У меня есть div в html-файле, который определяется следующим образом:

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

Во внешней таблице стилей я определяю следующий стиль.

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

Как мне прочитать / записать значение фона, используя jQuery?

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

метод не будет работать, потому что это не встроенный стиль. И

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

не определено.

Я могу сделать это с помощью javascript довольно просто, но мне интересно, как это делается через jQuery.

Answer 1

background - это «волшебное» свойство CSS, которое распространяется на все различные свойства background-*, такие как background-image, background-color, background-repeat ...

Чтобы получить их в jQuery, вы должны позвонить $('#rangeTabAll').css('backgroundColor') и так далее. Обратите внимание на camelCase вместо разделения слов с помощью тире.

Я только что заметил, что jQuery конвертирует background-color в backgroundColor и т. Д., Так что вам не придется об этом беспокоиться. Вы также можете сделать $('#rangeTabAll').css('background-color').

Answer 2

помнить:

Сокращенные свойства CSS (например, margin , background , border ) не поддерживаются. Например, если вы хотите получить предоставленная маржа, используйте: $ (elem) .css (' marginTop ') и $ (elem) .css (' marginRight ') и т. д.

из Документация jQuery: CSS

в вашем примере сокращение background не поддерживается, вам нужно написать полное свойство.

для

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

вы бы написали:

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

или

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

Answer 3

Почему бы не определить свой альтернативный фон как класс CSS и использовать $('#rangeTabAll').addClass('alternate') и $('#rangeTabAll').removeClass('alternate')?