Как я могу удалить стиль, добавленный С.функция 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")
Как насчет чего-то вроде:
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()
(удалите класс, если он присутствует, и добавьте его, если это не так.)
добавление / удаление класса также менее запутанно для изменения / устранения неполадок при работе с проблемами макета (в отличие от попытки выяснить, почему исчез определенный стиль.)
это сложнее, чем некоторые другие решения, но могут предложить большую гибкость в сценарии:
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 = ' ';