Я изменяю CSS с помощью jQuery и хочу удалить стилизацию, которую я добавляю на основе вводимого значения:
if(color != '000000') $("body").css("background-color", color); else // remove style ?
Как я могу это сделать? Обратите внимание, что строка выше выполняется всякий раз, когда цвет выбирается с помощью цветомера (т.е. когда мышь перемещается по цветовому колесу).
Второе замечание: я не могу сделать это с помощью css("background-color", "none")
, потому что это удалит стилизацию по умолчанию из файлов css. Я просто хочу удалить встроенный стиль background-color
, добавленный jQuery.
Замена свойства на пустую строку, похоже, помогает:
$.css("background-color", "");
Принятый ответ работает, но оставляет пустой атрибут style
в DOM в моих тестах. Ничего страшного, но это удаляет его полностью:
removeAttr( 'style' );
Это предполагает, что вы хотите удалить все динамические стили и вернуться к стилю таблицы стилей.
Есть несколько способов, чтобы удалить свойство CSS с помощью jQuery:
1. Установка свойства CSS по умолчанию (начальное) значение
.css("background-color", "transparent")
Смотрите начальное значение для свойства CSS в МДН.
Здесь значение по умолчанию - "прозрачный". Вы также можете использовать наследовать
для нескольких свойств CSS, наследовать свойства от своего родителя. В CSS3/CSS4, вы можете также использовать начальных
, вернуться
или отключено
но эти слова могут иметь ограниченную поддержку браузера.
2. Удаление свойства CSS
Пустая строка удаляет свойство CSS, т. е.
.css("background-color","")
Но будьте осторожны, как указано в в jQuery .в CSS() документация, при этом удаляется имущества, но он имеет проблемы совместимости с IE8 для определенных свойств CSS стенографии, в том числе фон.
установка значения свойства STYLE в пустую строку — например, $('#mydiv').в CSS('цвет', '') — удаляет свойство из элемента если он уже был непосредственно применен, будь то в HTML-стиле атрибут, через jQuery'ов .в CSS() метод, или через прямой дом манипуляция стиля собственность. Это, однако, не удалить стиль, который был применен с правило CSS в таблице стилей или <стиль и GT; элемент. Предупреждение: одним заметным исключением является то, что для IE 8 и ниже, удаление свойства стенографии, такие как границы или фона полностью устранить этот стиль с элементом, независимо от того, что находится В таблицу стилей или <стиль и GT; элемент.
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);
Если вы используйте CSS стиль, вы можете использовать:
$("#element").css("background-color","none");
а потом заменить на:
$("#element").css("background-color", color);
Если вы Don'т использовать стиль CSS и у вас есть атрибут в HTML-элемент, вы можете использовать:
$("#element").attr("style.background-color",color);
Две тысячи восемнадцать
есть собственный API для этого
element.style.removeProperty(propery)
Почему бы не сделать стиль, который вы хотите удалить класс CSS? Теперь вы можете использовать: .removeClass()
.
Это также открывает возможность использования: .toggleClass()
(удалить класс, если он'ы присутствуют, и добавить его, если это's не.)
Добавление / удаление класса тоже менее запутанной, чтобы изменить / устранить при решении вопросов компоновки (в отличие от попыток выяснить, почему определенный стиль исчез.)
let el = document.querySelector(element)
let styles = el.getAttribute('style')
el.setAttribute('style', styles.replace('width: 100%', ''))
Попробуйте Это
$(".ClassName").css('color','');
Or
$("#Idname").css('color','');
Это сложнее, чем некоторые другие решения, но могут предложить большую гибкость в сценарии:
.myColor {}
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/
Предостережения:
Изолируя стиль таким образом то, что CSS-это все о, Даже если манипулирование это'т. Манипулируя правила CSS не то, что jQuery-это все о jQuery и манипулирует DOM-элементов, и использует CSS-селекторы, чтобы сделать это.
Простая дешевая в веб-разработке. Я рекомендую использовать пустую строку при удалении определенного стиля
$(element).style.attr = ' ';