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

Ответ 1

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

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

Ответ 2

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

removeAttr( 'style' );

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

Ответ 3

Существует несколько способов удалить свойство 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, включая фон.

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

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

.removeAttr("style")

Ответ 4

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

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

Ответ 5

Это приведет к удалению полного тега:

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

Ответ 6

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

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

Ответ 7

Как насчет чего-то типа:

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

Ответ 8

Попробуйте следующее:

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

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

Спасибо

Ответ 9

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

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

или

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

Ответ 10

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

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

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

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

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

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

Ответ 11

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

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

В вашем случае используйте его как:

$(<mySelector>).removeCss();

или

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

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

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

Ответ 12

2018

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

element.style.removeProperty(propery)

Ответ 13

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

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

Ответ 14

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

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

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

Ответ 15

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

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

Ответ 16

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

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

Ответ 17

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

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/

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

• Не тестировалось.
• Невозможно включить ! important или другие директивы в новое значение. Любые такие существующие директивы будут потеряны в результате этой манипуляции.
• Только изменения впервые обнаружили появление стиляSelector. Не добавляет и не удаляет целые стили, но это может быть сделано с чем-то более сложным.
• Любые недопустимые/непригодные значения будут игнорироваться или вызывать ошибку.
• В Chrome (по крайней мере) нелокальные (как в межсайтовых) правила CSS не отображаются через объект document.styleSheets, поэтому это не будет работать на них. Нужно добавить локальные переопределения и манипулировать ими, имея в виду "первое обнаруженное" поведение этого кода.
• document.styleSheets не особенно дружелюбен к манипуляции в целом, не ожидайте, что это будет работать для агрессивного использования.

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

Ответ 18

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

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