Jak usunąć właściwość css w jQuery

197 
if(prev_clicked)
{   
    $("#accordion li a.category").css('background-image', 'url("img/off_all_channel.png")');                    
    $("#accordion li a.comment").css('background-image', 'url("img/on_all_online.png")');                   
    $(".icha0").removeProperty("background-color");
    $(".icha0").removeProperty("opacity");
}
else
{   
   $(".icha0").css("background-color","#D5D5D2");
   $(".icha0").css("opacity","0.70");
}

Próbuję usunąć dwie właściwości css, które dodałem, ale wydaje się, że nie działa. Ktoś jeszcze?

jquery SooIn Nam
źródło
1
Wypróbuj Google przed opublikowaniem tutaj. Nie mam wątpliwości, że pierwszy wynik dla dokładnie podanego tytułu zwróci wynik akceptowalny. Nie mam pojęcia skąd jesteś .removeProperty().
Christian
1
@Christian Varga, co jest zabawne, teraz, gdy opublikował to pytanie, jest to pierwszy wynik Google. Drugi wynik to kolejna poprawna odpowiedź na przepełnienie stosu. Trzeci to „removeProp ()”, a czwarty to „removeAttr ()”, oba są nieprawidłowe.
rocketsarefast

Odpowiedzi:

369

Możesz je usunąć poprzez:

$(".icha0").css({ 'background-color' : '', 'opacity' : '' });
Nevin
źródło
26
Trochę za późno na odpowiedź, ale myślę, że to ważne. Należy pamiętać, że spowoduje to usunięcie tylko atrybutów elementu zdefiniowanych w atrybucie „style”. To NIE przyniesie żadnego efektu, jeśli zostaną przypisane do klasy lub podobnego.
José Carlos
15
Jeśli chcesz usunąć zestaw właściwości za pomocą klasy, możesz ustawić na „inital” zamiast „”
James Brierley,
82

Możesz również użyć .css()do usunięcia właściwości css, jak poniżej:

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

Jak wspomniano w dokumentacji jquery:

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,

Mahmoud Gamal
źródło
16
Z jqeury css: „Nie usuwa jednak stylu, który został zastosowany z regułą CSS w arkuszu stylów lub elemencie <style>”
eggmatters
36

Aby usunąć wbudowaną właściwość CSS, użyj:

$('.className').css({propertyName: ''});

Aby usunąć cały styl liniowy elementu, użyj:

$('.className').removeAttr('style');

Znalazłem również tę sugestię, aby usunąć właściwość CSS ze stylów (osobny plik):

$ ('. className'). style.propertyName = '';

ALE nie mogłem w ogóle sprawić, żeby działało, więc umieszczam to tutaj tylko dla ciebie.

3Gee
źródło
4
$ ('. className'). style.propertyName = ''; musi być $ ('. className') [0] .style.propertyName = ''; - ale to absolutnie nonsens
SuperNova
20

Albo możesz ustawić właściwości z powrotem na puste:

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

Lub możesz zmienić kod, aby używał klas zdefiniowanych w pliku CSS:

$(".icha0").addClass('properties'); 
$(".icha0").removeClass('properties');
Jivings
źródło
Pomógł usunąć postrzępione krawędzie dzięki zagnieżdżonej perspektywie 3D. Byłem sfrustrowany próbą usunięcia jednej z perspektyw w celu rozwiązania problemu anty-aliasu, ten post uratował mi dzień! Dziękuję Ci!
Richard Yan,
3

Mamy dwa sposoby: możesz bezpośrednio usunąć zastosowaną klasę stylu CSS, która jest zastosowana do elementu DOM, lub usunąć zastosowany styl CSS z elementu

//Remove the class associated with element

$('#ID').removeClass("cssClass");

//Remove the CSS style from DOM element

$('p').css({"color":""});
Rajeev
źródło
3
W tej odpowiedzi nie ma nic nowego, nie ma sensu powtarzać innych odpowiedzi.
Shadow Wizard is Ear For You
3

Miałem ten problem, ale nie widziałem tutaj żadnego rozwiązania, które satysfakcjonowałoby PO. Większość rozwiązań sugeruje pozbycie się całego atrybutu stylu, co nie jest tego warte.

Użyłem metody prop jQuery'ego .

var styleObject = $('my-selector').prop('style'); 

styleObject.removeProperty('background-color');
NaxBuda
źródło
2

Alternatywna opcja mniej niż idealna, ale może obejść różne problemy. Dodaj nową klasę do elementu o wartości dziedziczonej :

css

.clearCSS {
    background-color: inherit !important;
}

jquery

$(".icha0").addClass('clearCSS');
Andrzej
źródło
2

Jest to dosłownie kopia wklej z tej odpowiedzi i używam go do wyczyszczenia stylu CSS, który dodałem z jQuery we wcześniej wykonanej funkcji.

Aby usunąć wbudowaną właściwość CSS, użyj: 

$('.className').css({propertyName: ''});

Aby usunąć cały styl liniowy elementu, użyj: 

$('.className').removeAttr('style');

LUB według ID:

$('#idName').removeAttr('style');
Jortega
źródło
1

Aby usunąć całą właściwość CSS w JQuery, można użyć następującego kodu:

    $(".selector").removeClass().removeAttr('style');

Dzięki.

Kawsik Roy
źródło
1

jeśli chcesz usunąć, a nie zaktualizować określoną właściwość, możesz po prostu użyć removeProp, a nie removeProperty :

$(".icha0").removeProp("background-color");
$(".icha0").removeProp("opacity");
Azzabi Haythem
źródło