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

682

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

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

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

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

Теги:

16 ответов

1119
Лучший ответ

При изменении свойства на пустую строку выполняется задание.

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

  • 23
    не работает на IE 6-8
  • 436
    Кого волнует IE 6-8 ??? IE 6-8 - ад для разработки, поэтому вы можете считать его устаревшим. Если пользователи все еще используют IE 6-8, пусть они пострадают!
Показать ещё 16 комментариев
443

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

removeAttr( 'style' );

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

  • 0
    Это хорошая идея, но она содержит ошибки в jQuery, см. Отправленную ошибку: bugs.jquery.com/ticket/9500
  • 4
    @Tosh Эта ошибка была устранена 25.08.2011: bugs.jquery.com/…
Показать ещё 6 комментариев
151

Существует несколько способов удалить свойство 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")
39

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

var bodyStyle = document.body.style;
if (bodyStyle.removeAttribute)
    bodyStyle.removeAttribute('background-color');
else        
    bodyStyle.removeProperty('background-color');
  • 10
    Парень уже использует jQuery ... зачем беспокоиться о реализации кросс-браузерного метода!?!?
  • 32
    потому что jquery не все, потому что она или, возможно, я должен сказать, что каждый из нас, как разработчики, должен знать, что означает совместимость и как делать такие вещи с основными языками, как JavaScript, возможно, это моя теория, я уже создал свою собственную структуру Исходя из своих знаний о базовом JavaScript, я отказываюсь использовать другие вещи, у меня есть своя собственная концепция и мой образ мышления :) и, кстати, спасибо за ваше (-), мне просто нужно было добавить ценность :), а также, кстати, парень разве не парень она она по имени Алекс
Показать ещё 5 комментариев
15

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

$("#element").removeAttr("style");
$("#element").removeAttr("background-color") 
  • 19
    Чтобы удалить только одно свойство css: var cssObject = $('selector').prop('style'); cssObject.removeProperty('background-color');
  • 0
    igar - ваше решение самое подходящее. Я поместил его в цикл «.each» для кучи ячеек таблицы, которые должны были отображать «display: none», но с другими свойствами, которые должны были остаться. Это сработало безупречно, просто сняв дисплей: нет и оставив остальные.
Показать ещё 1 комментарий
7

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

  $("body").removeAttr("style");
  • 0
    Это грубое решение и не будет работать всегда, потому что оно удаляет полный стиль элемента
5

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

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

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

Спасибо

  • 0
    Единственная проблема с вашим «удалить существующее» состоит в том, что он также переопределит фон таблицы стилей, если есть один набор.
5

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

var myCss = $(element).attr('css');
myCss = myCss.replace('background-color: '+$(element).css('background-color')+';', '');
if(myCss == '') {
  $(element).removeAttr('css');
} else {
  $(element).attr('css', myCss);
}
  • 0
    Мне нравится этот! Вы удаляете указанное свойство и больше ничего.
4

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

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

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

$(<mySelector>).removeCss();

или

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

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

$(<mySelector>).removeCss(true);
  • 0
    $(this).removeAttr является избыточным, и this.removeAttr должно быть достаточно.
  • 0
    Будет ли removeAttr удалять также class attr? я так не думаю
Показать ещё 3 комментария
4

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

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

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

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

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

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

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

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

или

$('#tag-id').removeAttr('style');
  • 0
    Это также удалит другие встроенные стили, а не только цвет.
0

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

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

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

0

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

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

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

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 для этого.

0

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

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

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

$elem.attr('style','');
Сообщество Overcoder
Наверх
Меню