it-swarm.com.ru

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

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

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

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

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

787
Alex

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

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

1230
anon

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

removeAttr( 'style' );

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

513
ThinkingStiff

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

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

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

.removeAttr("style")
162
KrisWebDev

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

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

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

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

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

  $("body").removeAttr("style");
16
SURJEET SINGH Bisht

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

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

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

Спасибо

6
uihelp

Как насчет чего-то вроде:

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

Просто с помощью:

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

или же 

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

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

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

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

$(<mySelector>).removeCss();

или же 

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

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

$(<mySelector>).removeCss(true);
5
Abdennour TOUMI

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

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

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

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

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

$("#element").attr("style.background-color",color);
5
Luis
let el = document.querySelector(element)
let styles = el.getAttribute('style')

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

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

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

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

1
Neil Girardi

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

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

Попробуй это

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

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

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

2018

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

element.style.removeProperty(propery)
0
pery mimon

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

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

.myColor {}

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

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

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

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

0
dkloke