Как удалить стиль, добавленный с помощью функции .css()?

Я изменяю CSS с помощью jQuery и хочу удалить стилизацию, которую я добавляю на основе вводимого значения:

if(color != '000000') $("body").css("background-color", color); else // remove style ?

Как я могу это сделать? Обратите внимание, что строка выше выполняется всякий раз, когда цвет выбирается с помощью цветомера (т.е. когда мышь перемещается по цветовому колесу).

Второе замечание: я не могу сделать это с помощью css("background-color", "none"), потому что это удалит стилизацию по умолчанию из файлов css. Я просто хочу удалить встроенный стиль background-color, добавленный jQuery.

Комментарии к вопросу (2)
Решение

Замена свойства на пустую строку, похоже, помогает:

$.css("background-color", "");
Комментарии (14)

Принятый ответ работает, но оставляет пустой атрибут style в DOM в моих тестах. Ничего страшного, но это удаляет его полностью:

removeAttr( 'style' );

Это предполагает, что вы хотите удалить все динамические стили и вернуться к стилю таблицы стилей.

Комментарии (8)

Есть несколько способов, чтобы удалить свойство CSS с помощью jQuery:

1. Установка свойства CSS по умолчанию (начальное) значение

.css("background-color", "transparent")

Смотрите начальное значение для свойства CSS в МДН. Здесь значение по умолчанию - "прозрачный". Вы также можете использовать наследовать для нескольких свойств CSS, наследовать свойства от своего родителя. В CSS3/CSS4, вы можете также использовать начальных, вернуться или отключено но эти слова могут иметь ограниченную поддержку браузера.

2. Удаление свойства CSS

Пустая строка удаляет свойство CSS, т. е.

.css("background-color","")

Но будьте осторожны, как указано в в jQuery .в CSS() документация, при этом удаляется имущества, но он имеет проблемы совместимости с IE8 для определенных свойств CSS стенографии, в том числе фон.

установка значения свойства STYLE в пустую строку — например, $('#mydiv').в CSS('цвет', '') — удаляет свойство из элемента если он уже был непосредственно применен, будь то в HTML-стиле атрибут, через jQuery'ов .в CSS() метод, или через прямой дом манипуляция стиля собственность. Это, однако, не удалить стиль, который был применен с правило CSS в таблице стилей или <стиль и GT; элемент. Предупреждение: одним заметным исключением является то, что для IE 8 и ниже, удаление свойства стенографии, такие как границы или фона полностью устранить этот стиль с элементом, независимо от того, что находится В таблицу стилей или <стиль и GT; элемент.

3. Убрав весь стиль элемента

.removeAttr("style")
Комментарии (0)

Я получил способ удаления атрибута стиля с помощью чистого JavaScript, просто чтобы вы знали способ чистого JavaScript

var bodyStyle = document.body.style;
if (bodyStyle.removeAttribute)
    bodyStyle.removeAttribute('background-color');
else        
    bodyStyle.removeProperty('background-color');
Комментарии (7)

Это позволит удалить полный тег :

  $("body").removeAttr("style");
Комментарии (1)

либо эти функции jQuery должен работать:

$("#element").removeAttr("style");
$("#element").removeAttr("background-color") 
Комментарии (3)

ТОЛЬКО используя:

$('.tag-class').removeAttr('style');

или

$('#tag-id').removeAttr('style');
Комментарии (1)

Как насчет что-то вроде:

var myCss = $(element).attr('css');
myCss = myCss.replace('background-color: '+$(element).css('background-color')+';', '');
if(myCss == '') {
  $(element).removeAttr('css');
} else {
  $(element).attr('css', myCss);
}
Комментарии (1)

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

$('#divID').css({"background":"none"});// remove existing

$('#divID').css({"background":"#bada55"});// add new color here.

Спасибо

Комментарии (1)

Используйте мой плагин :

$.fn.removeCss=function(all){
        if(all===true){
            $(this).removeAttr('class');
        }
        return $(this).removeAttr('style')
    }

В вашем случае ,использовать его как следующие :

$().removeCss();

или

$().removeCss(false);

если вы хотите удалить также CSS, определенные в его классах :

$().removeCss(true);
Комментарии (5)

Если вы используйте CSS стиль, вы можете использовать:

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

а потом заменить на:

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

Если вы Don'т использовать стиль CSS и у вас есть атрибут в HTML-элемент, вы можете использовать:

$("#element").attr("style.background-color",color);
Комментарии (0)

Две тысячи восемнадцать

есть собственный API для этого

element.style.removeProperty(propery)
Комментарии (0)

Почему бы не сделать стиль, который вы хотите удалить класс CSS? Теперь вы можете использовать: .removeClass(). Это также открывает возможность использования: .toggleClass()

(удалить класс, если он'ы присутствуют, и добавить его, если это's не.)

Добавление / удаление класса тоже менее запутанной, чтобы изменить / устранить при решении вопросов компоновки (в отличие от попыток выяснить, почему определенный стиль исчез.)

Комментарии (0)
let el = document.querySelector(element)
let styles = el.getAttribute('style')

el.setAttribute('style', styles.replace('width: 100%', ''))
Комментарии (0)

Это тоже работа!!

$elem.attr('style','');
Комментарии (0)

Попробуйте Это

$(".ClassName").css('color','');
Or 
$("#Idname").css('color','');
Комментарии (0)

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

  1. сформулировать определение класса изоляции (инкапсулирующие) стиль, который вы хотите применить/удалить. Он может быть пустым (и в этом случае, вероятно, должно быть):
.myColor {}
  1. Используйте этот код, основанный на http://jsfiddle.net/kdp5V/167/ от answer](https://stackoverflow.com/questions/6115325/change-css-rule-in-class-using-jquery/7014965#7014965) по gilly3:
function changeCSSRule(styleSelector,property,value) {
    for (var ssIdx = 0; ssIdx < document.styleSheets.length; ssIdx++) {
        var ss = document.styleSheets[ssIdx];
        var rules = ss.cssRules || ss.rules;
        if(rules){
            for (var ruleIdx = 0; ruleIdx < rules.length; ruleIdx++) {
                var rule = rules[ruleIdx];
                if (rule.selectorText == styleSelector) {
                    if(typeof value == 'undefined' || !value){
                        rule.style.removeProperty(property);
                    } else {
                        rule.style.setProperty(property,value);
                    }
                    return; // stops at FIRST occurrence of this styleSelector
                }
            }
        }
    }
}

Пример использования: http://jsfiddle.net/qvkwhtow/

Предостережения:

  • Не тщательно протестированы.
  • Может'т включать в себя !важно или других указаний в новое значение. Любой такой существующей директивы будут потеряны благодаря этой манипуляции. Изменения только первое найденное вхождение styleSelector. Не'т добавить или удалить все стили, но это может быть сделано с чем-то более замысловатое.
  • Любой неверный/неиспользованный значения будут проигнорированы или выдает ошибку.
  • В Chrome (по крайней мере), нелокальный (как в кросс-сайте) правила CSS не отображаются в документе.объект таблицы стилей, так что это выиграл't работа на них. Можно было бы добавить локальные переопределения и манипулировать, что имея в виду "первый нашли, что" поведение настоящего Кодекса.
  • документа.стили не особенно дружелюбно к манипуляциям в общем, Дон'т ожидать, чтобы это работало для агрессивного использования.

Изолируя стиль таким образом то, что CSS-это все о, Даже если манипулирование это'т. Манипулируя правила CSS не то, что jQuery-это все о jQuery и манипулирует DOM-элементов, и использует CSS-селекторы, чтобы сделать это.

Комментарии (0)

Простая дешевая в веб-разработке. Я рекомендую использовать пустую строку при удалении определенного стиля

$(element).style.attr = '  ';
Комментарии (0)