Удаление стиля jQuery .css() без потери основного CSS

Быстрый ответ

Если вы хотите сбросить отдельное CSS-свойство, установленное через функцию .css() в jQuery, нужно присвоить ему пустую строку:

$('#element').css('свойство', '');

А для удаления всех инлайн-стилей у элемента воспользуйтесь функцией .removeAttr():

$('#element').removeAttr('style');

Применение jQuery-метода .css(): ключевые принципы

С помощью функции .css() во фреймворке jQuery можно непосредственно указывать инлайн-стили для определенных элементов. Это не затрагивает стили, которые были установлены во внешних CSS-файлах.

Сброс CSS-свойства к пустой строке позволит вернуть его первоначальное значение, которое было указано во внешнем файле стилей:

$('#element').css('background-color', ''); // Вернем исходный цвет фона для элемента '#element'

Для того, чтобы привести элемент к его исходному виду, используйте .removeAttr('style'). Это действие удалит все инлайн-стили:

$('#element').removeAttr('style'); // Элемент '#element' возвращается к своему изначальному виду

Совместимость с устаревшими и современными браузерами

Обеспечение корректной работы сайта в различных браузерах – важная задача. Особенно это становится важно, учитывая, что старые версии некоторых браузеров, например, IE8, могут неправильно интерпретировать использование пустых строк в качестве значений CSS-свойств.

Не забывайте об альтернативном способе – использовании чистого JavaScript:

document.getElementById('element').removeAttribute('style'); // Возвращаем элементу '#element' его первоначальный вид

Этот код является аналогом jQuery-метода .removeAttr('style').

Для удаления конкретного свойства в чистом JavaScript используйте функцию removeProperty():

document.getElementById('element').style.removeProperty('background-color');  // Удаляем у элемента '#element' установленный фон

Визуализация

Представьте себе процесс следующим образом: ваш элемент — это комната, где все вещи разбросаны, и вы решаете привести её в порядок.

До: Комната в беспорядке (🛏️👕🧹🧸)
Добавление стиля через .css(): количество вещей увеличилось (🛏️👕🧹🧸📚🔮)
Удаление стиля: проводим уборку (🧹)

Вы убираете определенную часть "беспорядка":

$("#element").css("color", ""); // 🧹 Убрали стиль текста

В итоге получаем аккуратную комнату, или в нашем случае – обработанный стиль элемента:

До: [👕🎨] – Элемент с индивидуальным цветом
После: [👕]   – Элемент выглядит аккуратнее

Динамические стили и цветовые схемы

Стили могут меняться динамически. Очень важно, чтобы ваш код позволял автоматически менять цвет в соответствии с выбранной цветовой схемой. В таком случае удаление определённого стиля играет существенную роль:

$('.color-picker').on('change', function() {
    $('#element').css('background-color', ''); // Подготавливаем '#element' к изменению цветовой палитры
});

Сохранение первоначального вида стилей

Очень ценно сохранять неповрежденными предустановленные стили при удалении других. Это как вытянуть карту из построенного домика карт, не разрушив при этом всю конструкцию. Обязательно проверьте стили, прежде чем что-то удалять:

if ($('#element').attr('style')) {
   $('#element').removeAttr('style'); // Перед удалением стилей элемента '#element' обязательно дважды все проверьте
}

Полезные материалы

1. .css() | Документация jQuery API — официальная документация jQuery, посвященная методу .css().
2. javascript – Как удалить стили, добавленные с помощью .css()? – Stack Overflow — обсуждение удаления стилей.
3. .removeAttr() | Документация jQuery API — руководство по удалению атрибутов в jQuery.
4. Полное руководство по использованию элемента Table | CSS-Tricks — подробное изучение таблиц в CSS для эффективного управления стилями.
5. Стили и классы — разница между стилями и классами в JavaScript.
6. .addClass() | Документация jQuery API — руководство по использованию и управлению классами CSS в jQuery.
7. Функция css() в jQuery — инструкция по работе с CSS с помощью jQuery.