Как отключить атрибут CSS элемента с помощью jQuery?

95

Если я устанавливаю значение CSS для определенного элемента, используя:

$('#element').css('background-color', '#ccc');

Я хочу иметь возможность отключить это значение для конкретного элемента и использовать каскадное значение в следующих строках:

$('#element').css('background-color', null);

Но этот синтаксис, похоже, не работает - возможно ли это с использованием другого синтаксиса?

Изменить: значение не наследуется от родительского элемента - исходные значения поступают из селектора на уровне элемента. Извините за путаницу!

cdleary
источник

Ответы:

143

Из документации jQuery :

Установка значения свойства стиля в пустую строку - например, $('#mydiv').css('color', '')- удаляет это свойство из элемента, если оно уже было непосредственно применено, будь то в атрибуте стиля HTML, с помощью .css()метода jQuery или путем прямого управления styleсвойством DOM . Однако он не удаляет стиль, который был применен с помощью правила CSS в таблице стилей или <style>элементе.

Гленн Мосс
источник
Я столкнулся с этим вопросом, когда у меня была эта проблема. В моем случае я устанавливал атрибут css в styleатрибуте тега, поэтому этот метод не работал. Применение стиля с помощью .css()метода вместо тега позволило мне удалить его позже.
Гленн Мосс
14

Думаю, вы также можете:

$('#element').css('background-color', '');

Это то, что я делал давным-давно для displayсвойства в plain-old-javascript, чтобы показать / скрыть поле.

FryGuy
источник
4

На самом деле, синтаксис, который я считал неправильным (с null), похоже, работает - мой селектор был просто неправильно сформирован и, следовательно, не дал никаких элементов. Ооо!

cdleary
источник
21
Поскольку jquery 1.4.3 css(..., null)не работает и css(..., '')должен использоваться вместо этого - bugs.jquery.com/ticket/7233
Тим Сильвестр
3

Попробуй это:

$('#element').css('background-color', 'inherit');
HectorMac
источник
1
К сожалению, наследование - это не то поведение, которое я ищу: «свойство принимает то же вычисленное значение, что и свойство для родительского элемента» из w3.org/TR/CSS2/cascade.html
cdleary
Скорее «начальный», чем «наследственный». «Inherit» адаптируется к родительскому элементу, «Initial» делает то, что говорит слово.
Крис С.
0

Как бы то ни было, похоже, что это не работает в IE 8 для 'filter', мне пришлось использовать это (в обратном вызове fadeIn):

$(this).attr('style', $(this).attr('style').replace(/\bfilter:\s*;*/, ''));

Очевидно, мне нужно было удалить пустое объявление встроенного фильтра, чтобы CSS мог вступить в силу; были и другие встроенные правила, поэтому я не мог просто удалить атрибут стиля.

Брэндон Хилл
источник
-2

Если это может помочь, я добавляю проблему с двойными кавычками:

$('#element').css("border-color", "");

не работает пока

$('#element').css('border-color', '');

работает

мерлинтинтин
источник