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

Question

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

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

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

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

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

954

javascript jquery css

Источник

user376947 27 окт '10 в 19:21

18 ответов

Решение

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

removeAttr( 'style' );

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

585

Источник

user918414 10 окт '11 в 04:09

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

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

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

.removeAttr("style")

183

Источник

user2227298 09 май '13 в 13:25

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

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

56

Источник

user660784 15 ноя '11 в 09:40

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

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

26

Источник

user5081921 01 дек '16 в 15:00

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

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

19

Источник

user2724353 28 авг '13 в 13:42

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

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

или же

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

11

Источник

user5004526 01 дек '16 в 14:45

2018

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

element.style.removeProperty(propery)

10

Источник

user1919821 24 дек '18 в 08:00

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

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

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

Спасибо

7

Источник

user2909712 08 янв '14 в 07:14

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

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

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

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

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

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

7

Источник

user2406064 21 май '13 в 14:54

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

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

7

Источник

user1765868 27 ноя '12 в 16:11

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

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

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

$(<mySelector>).removeCss();

или же

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

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

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

7

Источник

user747579 24 май '13 в 06:47

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

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

4

Источник

user1163485 11 дек '14 в 16:32

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

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

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

3

Источник

user1500241 16 сен '17 в 00:19

let el = document.querySelector(element)
let styles = el.getAttribute('style')

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

2

Источник

user7047488 01 ноя '18 в 12:46

Вы удаляете стиль, используя

removeAttr( 'style' );

2

Источник

user11935605 10 июн '20 в 15:03

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

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/

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

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

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

1

Источник

user964364 08 авг '15 в 07:44

Попробуй это

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

1

Источник

user2243229 24 авг '16 в 06:05

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

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

1

Источник

user3782514 14 июл '15 в 06:14

Пытаться

document.body.style=''

$("body").css("background-color", 'red');

function clean() {
  document.body.style=''
}

body { background-color: yellow; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="clean()">Remove style</button>

0

Источник

user860099 24 авг '20 в 19:15

Ты можешь использовать:

 $("#eslimi").removeAttr("style").hide();

0

Источник

user10116812 22 авг '20 в 13:05

Другие вопросы по тегам javascript jquery css

27 окт '10 в 19:22 2010-10-27 19:22 · Accepted Answer · 2010-10-27 19:22

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

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

1433

Источник

27 окт '10 в 19:22