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?


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' : '' });

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,


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.


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');

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":""});

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');

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'); 

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');

1

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

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

Dzięki.


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");
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.