Jak mogę usunąć styl dodany za pomocą funkcji .css ()?

Zmieniam CSS za pomocą jQuery i chcę usunąć styl dodawany na podstawie wartości wejściowej:

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

W jaki sposób mogę to zrobić?
Zauważ, że powyższa linia biegnie za każdym razem, gdy kolor jest wybierany za pomocą próbnika kolorów (tj. Gdy mysz przesuwa się po kole kolorów).

Druga uwaga: nie mogę tego zrobić, css("background-color", "none")ponieważ spowoduje to usunięcie domyślnego stylu z plików CSS .
Chcę tylko usunąć background-colorstyl wbudowany dodany przez jQuery .

Zmiana właściwości na pusty ciąg znaków wydaje się wykonywać zadanie:

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

Przyjęta odpowiedź działa, ale pozostawia pusty styleatrybut w DOM w moich testach. Nic wielkiego, ale to wszystko usuwa:

removeAttr( 'style' );

Zakłada się, że chcesz usunąć wszystkie dynamiczne style i wrócić do stylizacji arkusza stylów.

Istnieje kilka sposobów usunięcia właściwości CSS za pomocą jQuery:

1. Ustawienie właściwości CSS na wartość domyślną (początkową)

.css("background-color", "transparent")

Zobacz wartość początkową właściwości CSS w MDN . Tutaj wartością domyślną jest transparent. Możesz także użyć inheritdla kilku właściwości CSS, aby odziedziczyć atrybut od jego rodzica. W CSS3 / CSS4, można również użyć initial, revertalbo unset, ale te słowa mogą mieć ograniczoną obsługę przeglądarki.

2. Usuwanie właściwości CSS

Pusty ciąg usuwa właściwość CSS, tj

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

Ale uwaga, jak określono w dokumentacji jQuery .css () , usuwa to właściwość, ale ma problemy z kompatybilnością z IE8 dla niektórych właściwości skróconych CSS, w tym tła .

Ustawienie wartości właściwości stylu na pusty ciąg znaków - np. $ ('# Mydiv'). Css ('color', '') - usuwa tę właściwość z elementu, jeśli została już bezpośrednio zastosowana, czy to w stylu HTML atrybut, za pomocą metody .css () jQuery lub przez bezpośrednią manipulację DOM właściwości stylu. Nie usuwa jednak stylu, który został zastosowany z regułą CSS w arkuszu stylów lub elemencie. Ostrzeżenie: jednym godnym uwagi wyjątkiem jest to, że w IE 8 i niższych usunięcie skróconej właściwości, takiej jak obramowanie lub tło, usunie ten styl całkowicie z elementu, niezależnie od tego, co jest ustawione w arkuszu stylów lub elemencie .

3. Usunięcie całego stylu elementu

.removeAttr("style")

Udało mi się usunąć atrybut stylu za pomocą czystego JavaScript, aby poinformować Cię o sposobie czystego JavaScript

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

Spowoduje to usunięcie pełnego tagu:

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

jedna z tych funkcji jQuery powinna działać:

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

Po prostu używając:

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

lub

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

Co powiesz na coś takiego:

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

Użyj mojej wtyczki:

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

W twoim przypadku użyj go w następujący sposób:

$(<mySelector>).removeCss();

lub

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

jeśli chcesz usunąć również CSS zdefiniowany w jego klasach:

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

Spróbuj tego:

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

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

Dzięki

Jeśli używasz stylu CSS, możesz użyć:

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

a następnie zamień na:

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

Jeśli nie używasz stylu CSS i masz atrybut w elemencie HTML, możesz użyć:

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

2018 r

jest do tego natywny API

element.style.removeProperty(propery)

Ten też działa !!

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

Dlaczego nie stworzyć stylu, w którym chcesz usunąć klasę CSS? Teraz można użyć: .removeClass(). Otwiera to również możliwość korzystania z:.toggleClass()

(usuń klasę, jeśli jest obecna i dodaj ją, jeśli nie jest).

Dodawanie / usuwanie klasy jest mniej mylące przy zmianie / rozwiązywaniu problemów podczas rozwiązywania problemów związanych z układem (w przeciwieństwie do prób ustalenia, dlaczego dany styl zniknął).

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

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

Jest to bardziej złożone niż niektóre inne rozwiązania, ale może oferować większą elastyczność w scenariuszach:

1) Utwórz definicję klasy, aby wyizolować (obudować) styl, który chcesz zastosować / usunąć selektywnie. Może być pusty (i w tym przypadku prawdopodobnie powinien być):

.myColor {}

2) użyć tego kodu, w oparciu o http://jsfiddle.net/kdp5V/167/ z tej odpowiedzi przez 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
                }
            }
        }
    }
}

Przykład użycia: http://jsfiddle.net/qvkwhtow/

Ostrzeżenia:

• Nie został dokładnie przetestowany.
• Nie można uwzględnić ! Ważnych lub innych dyrektyw w nowej wartości. Wszelkie takie istniejące dyrektywy zostaną utracone w wyniku tej manipulacji.
• Zmienia tylko pierwsze znalezione wystąpienie styleSelector. Nie dodaje ani nie usuwa całych stylów, ale można to zrobić za pomocą czegoś bardziej skomplikowanego.
• Wszelkie nieprawidłowe / nieużywalne wartości zostaną zignorowane lub wygenerują błąd.
• W Chrome (przynajmniej) reguły nielokalne (jak w wielu witrynach) CSS nie są ujawniane przez obiekt document.styleSheets, więc to na nich nie zadziała. Trzeba by dodać lokalne przesłonięcia i manipulować nimi, pamiętając o zachowaniu tego kodu przez „pierwsze znalezione”.
• document.styleSheets nie jest szczególnie przyjazny dla manipulacji w ogóle, nie oczekuj, że zadziała to w agresywnym użyciu.

Izolowanie stylów w ten sposób jest tym, o co chodzi w CSS, nawet jeśli nie jest nim manipulowanie. Manipulowanie regułami CSS NIE jest tym, o co chodzi w jQuery, jQuery manipuluje elementami DOM i używa do tego selektorów CSS.

Proste jest tanie w tworzeniu stron internetowych. Zalecam używanie pustego łańcucha podczas usuwania określonego stylu

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

Spróbuj tego

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