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

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

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

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

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

16 ответов


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

$.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 .УСБ() документация, это удаляет свойство, но оно имеет проблемы совместимости с IE8 для определенных свойств CSS shorthand, включая фон.

настройка значение свойства style для пустой строки-например $('#mydiv').css ('color',") - удаляет это свойство из элемента если он уже был непосредственно применен, будь то в стиле HTML атрибут, через jQuery .метод css () или через direct 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');

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

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

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

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

просто используешь:

$('.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);
}

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

$('#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);

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

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

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

$(<mySelector>).removeCss();

или

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

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

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

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

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

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


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

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

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

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

.myColor {}

2) Используйте этот код, основанный наhttp://jsfiddle.net/kdp5V/167/ от ответ by 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/

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

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

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


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

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

Попробуй Такое

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