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

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

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

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

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

Изменение свойства на пустую строку, кажется, делает работу:

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

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

removeAttr( 'style' );

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

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

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

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

См. Начальное значение свойства CSS в MDN . Здесь значением по умолчанию является transparent. Вы также можете использовать inheritнесколько свойств CSS для наследования атрибута от его родителя. В CSS3 / CSS4, вы можете также использовать initial, revertили , unsetно эти ключевые слова могут иметь ограниченную поддержку браузера.

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

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

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

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

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

3. Удаление всего стиля элемента

.removeAttr("style")

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

var bodyStyle = document.body.style;
if (bodyStyle.removeAttribute)
    bodyStyle.removeAttribute('background-color');
else        
    bodyStyle.removeProperty('background-color');

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

  $("body").removeAttr("style");

любая из этих функций jQuery должна работать:

$("#element").removeAttr("style");
$("#element").removeAttr("background-color") 

Просто используя:

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

или

$('#tag-id').removeAttr('style');

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

var myCss = $(element).attr('css');
myCss = myCss.replace('background-color: '+$(element).css('background-color')+';', '');
if(myCss == '') {
  $(element).removeAttr('css');
} else {
  $(element).attr('css', myCss);
}

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

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

Для вашего случая используйте его следующим образом:

$(<mySelector>).removeCss();

или

$(<mySelector>).removeCss(false);

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

$(<mySelector>).removeCss(true);

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

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

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

Спасибо

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

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

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

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

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

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

2018

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

element.style.removeProperty(propery)

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

$elem.attr('style','');

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

(удалите класс, если он есть, и добавьте его, если его нет.)

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

let el = document.querySelector(element)
let styles = el.getAttribute('style')

el.setAttribute('style', styles.replace('width: 100%', ''))

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

1) Создайте определение класса, чтобы изолировать (инкапсулировать) стиль, который вы хотите применять / удалять выборочно. Может быть пустым (и для этого случая, вероятно, должно быть):

.myColor {}

2) используйте этот код, основываясь на http://jsfiddle.net/kdp5V/167/ из этого ответа от 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-правила не отображаются через объект document.styleSheets, поэтому это не сработает. Можно было бы добавить локальные переопределения и манипулировать этим, имея в виду «первое найденное» поведение этого кода.
• document.styleSheets не особенно удобен для манипуляций в целом, не ожидайте, что это сработает для агрессивного использования.

Таким образом, CSS - это изоляция стиля, даже если это не манипулирование. Манипулирование правилами CSS - это НЕ то, чем занимается jQuery, jQuery манипулирует элементами DOM и использует селекторы CSS для этого.

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

$(element).style.attr = '  ';

Попробуй это

$(".ClassName").css('color','');
Or 
$("#Idname").css('color','');