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


868

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 .



lepiej spróbuj addClass / removeClass w oparciu o twoją funkcjonalność. Nie wpłynie to na inną stylizację.
Prabhakaran

Odpowiedzi:


1332

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

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

4
@baacke Szkoda, gdy domniemany „standard” jest strasznie przestarzały i marnuje dużo czasu na rozwój. Nie mam współczucia dla korporacji, które decydują się na korzystanie z przestarzałego oprogramowania, nie rozumiem, dlaczego powinienem poświęcać im więcej czasu na rozwój.
andrewb

33
Muszę poprzeć @baacke tutaj. Nasz klient nadal ma oficjalne minimalne wymagania IE6 (!!). Problem polega na tym, że ich klienci są na całym świecie, w tym w krajach słabiej rozwiniętych. „Klienci klienta” mogą używać bardzo starych komputerów do prowadzenia interesów z naszym klientem. Tak więc stara przeglądarka musi być co najmniej minimalnie obsługiwana, inaczej ryzykują utratę firmy ...
user1429080

8
Nie ustawicie wymagań żadnego rozwiązania, które opracujecie dla klienta. Jeśli ten klient chce lub potrzebuje wsparcia dla starszej przeglądarki, Twoim zadaniem jest ją zapewnić, kropka. Mówicie o „kogo to obchodzi”, nazywacie prawdziwych inżynierów złym nazwiskiem.
Ed DeGagne,

5
@EdDeGagne - Ciągle musisz przestać obsługiwać starsze wersje IE. To poprawia bazę kodu i motywuje odwiedzających do nieużywania starej IE. Jedyną trudną rzeczą jest ustalenie, kiedy można porzucić wsparcie. Witryny Google, mające wielu odwiedzających, jeśli zdecydują się porzucić starą IE, możesz im zaufać, że była to dobra decyzja. Jedna firma posunęła się nawet do tego, że powiedział użytkownikom, że opłaca się im kupować każdemu starszemu użytkownikowi IE nowoczesny komputer, niż utrzymywać kod IE (dokładnie to, co oferowali).
janko-m

5
Przestałem czytać, gdy zobaczyłem, że „IE8 jest nadal standardem, nawet w systemie Windows 7”
Capsule

544

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.


To fajny pomysł, ale wadliwy w jQuery, zobacz zgłoszony błąd: bugs.jquery.com/ticket/9500
Tosh

4
@Tosh Ten błąd został rozwiązany 8/25/2011
ThinkingStiff,

Wiem, ale przynajmniej w wersji 1.7 wciąż jest wadliwa, nie testowałem 1.8
Tosh

7
Spowoduje to również usunięcie wszystkich innych właściwości w atrybucie stylu. Więc wybierz mądrze.
rytm kodowania

1
To jest sprytne! zaakceptowana odpowiedź nie zadziała w sytuacjach, w których styl wstawiany przez jquery powinien zastąpić style css, ale ta metoda działa dobrze we wszystkich sytuacjach.
Farzad YZ

170

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")

49

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

11
Facet już korzysta z jQuery ... po co zawracać sobie głowy ponownym wdrażaniem metody dla różnych przeglądarek!?!?
billy

32
ponieważ jquery to nie wszystko, bo ona, a może powinienem powiedzieć każdemu z nas, ponieważ programiści powinni wiedzieć, co oznacza kompatybilność i jak robić takie rzeczy z podstawowymi językami, takimi jak JavaScript, być może to moja teoria, że ​​stworzyłem już własny framework z mojej wiedzy na temat podstawowego JavaScript'a odmawiam używania innych rzeczy, mam własną koncepcję i sposób myślenia :) a przy okazji dziękuję za twoje (-) po prostu musiałem być wartością dodaną :) a przy okazji tego faceta nie jest facetem, którym jest o imieniu Alex
Marwan

1
Chcę tylko zauważyć, że nie powinieneś sprawdzać document.all, jeśli go nie używasz. Być może powinieneś to sprawdzić w następujący sposób: if (elm.style.removeProperty) {elm.style.removeProperty (propertyName); } else if (elm.style.removeAttribute) {elm.style.removeAttribute (nazwa_atrybutu); }
Richard

cóż, masz rację, powinno tak być, jeśli (navigator.appName == „Microsoft Internet Explorer”) document.body.style.removeAttribute („kolor tła”); else document.body.style.removeProperty („kolor tła”); a z drugiej strony twoje rozwiązanie też jest słuszne :) dzięki za notatkę
Marwan

9
Nie, zdecydowanie powinieneś sprawdzić, czy ta funkcja istnieje, zamiast sprawdzić przeglądarkę. Co jeśli MS zdecyduje się zmienić nazwę funkcji w następnej wersji IE? Czy wtedy też idziesz sprawdzić wersję IE?
j03w 10.04.13


19

jedna z tych funkcji jQuery powinna działać:

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

22
Aby usunąć tylko jedną właściwość css:var cssObject = $('selector').prop('style'); cssObject.removeProperty('background-color');
ilgaar

igaar - twoje rozwiązanie jest najładniejsze. Umieściłem go w pętli „.each” dla stosu komórek tabeli, które miały „display: none”, które musiały przejść, ale miały inne właściwości, które musiały pozostać. Działa bezbłędnie, po prostu usuwając wyświetlacz: żaden i pozostawiając resztę.
Rob Von Nesselrode

9

Po prostu używając:

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

lub

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

Spowoduje to również usunięcie innych stylów dodanych w linii, nie tylko kolorów.
LongInt

7

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

Podoba mi się ten! Usuwasz określoną właściwość i nic więcej.
Joel

7

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

$(this).removeAttrjest zbędny i this.removeAttrpowinien wystarczyć.
Emile Bergeron

Czy removeAttr usunie również classattr? nie sądzę
Abdennour TOUMI

Mówię o removeAttrwnętrzu twojej wtyczki, w której thisjest już element jQuery. $(this)jest zbędny.
Emile Bergeron

2
AH! OK OK .. @EmileBergeron, stara jquery zapewnia thisjako HTMLElementinstancję odwzorowaną na element jQuery ... Jak widzisz, moja odpowiedź jest stara ... dlatego ... w każdym razie, mogę ci powiedzieć, dlaczego to zmieniają, robią to z powodu funkcji strzałki, która jest nowa w ES6. .. i thisstaje się bezużyteczny i został zastąpiony przezevent.currentTarget
Abdennour TOUMI

1
Słusznie! ;) Zabawne, jak stary ma 3 lata w świecie JS.
Emile Bergeron

7

Spróbuj tego:

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

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

Dzięki


Jedynym problemem związanym z „usunięciem istniejącego” jest to, że zastąpi on również tło arkusza stylów, jeśli istnieje jeden zestaw.
Jtbs

6

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



2

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ął).


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

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

1

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.


1

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

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

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.