Wie hebe ich das CSS-Attribut eines Elements mit jQuery auf?

93

Wenn ich einen CSS-Wert für ein bestimmtes Element mithilfe von:

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

Ich möchte in der Lage sein, diesen elementspezifischen Wert zu deaktivieren und den kaskadierten Wert zu verwenden, wie folgt:

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

Aber diese Syntax scheint nicht zu funktionieren - ist dies mit einer anderen Syntax möglich?

Bearbeiten: Der Wert wird nicht vom übergeordneten Element geerbt - die ursprünglichen Werte stammen von einem Selektor auf Elementebene. Entschuldigung für die Verwirrung!

jquery css cdleary
quelle

Antworten:

140

Aus den jQuery-Dokumenten :

Durch Festlegen des Werts einer Stileigenschaft auf eine leere Zeichenfolge - z. B. $('#mydiv').css('color', '')- wird diese Eigenschaft aus einem Element entfernt, wenn sie bereits direkt angewendet wurde, sei es im HTML-Stilattribut, über die .css()Methode von jQuery oder durch direkte DOM-Manipulation der styleEigenschaft. Es wird jedoch kein Stil entfernt, der mit einer CSS-Regel in einem Stylesheet oder <style>Element angewendet wurde .

Glenn Moss
quelle
Ich bin auf diese Frage gestoßen, als ich dieses Problem hatte. In meinem Fall habe ich das CSS-Attribut in einem styleAttribut auf dem Tag festgelegt, sodass diese Methode nicht funktioniert hat. Durch Anwenden des Stils mit der .css()Methode anstelle des Tags konnte ich ihn später entfernen.
Glenn Moss
14

Ich denke, Sie können auch tun:

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

Das habe ich vor langer Zeit getan, damit die displayEigenschaft in einfach-alt-Javascript ein Feld ein- / ausblendet.

FryGuy
quelle
4

Tatsächlich nullscheint die Syntax, die ich für falsch hielt (mit ), zu funktionieren - mein Selektor wurde nur falsch geformt und ergab somit keine Elemente. D'oh!

cdleary
quelle
21
Ab jquery 1.4.3 css(..., null)funktioniert nicht und css(..., '')sollte stattdessen verwendet werden - bugs.jquery.com/ticket/7233
Tim Sylvester
3

Versuche dies:

$('#element').css('background-color', 'inherit');
HectorMac
quelle
1
Erben ist leider nicht das Verhalten, nach dem ich suche: "Die Eigenschaft nimmt den gleichen berechneten Wert an wie die Eigenschaft für das übergeordnete Element" von w3.org/TR/CSS2/cascade.html
cdleary
Wahrscheinlicher "initial" als "erben". 'Erben' passt sich dem Elternteil an, 'Initial' macht das, was das Wort sagt.
Chris S.
0

Für das, was es wert ist, scheint dies in IE 8 für 'Filter' nicht zu funktionieren. Ich musste dies verwenden (in fadeIn callback):

$(this).attr('style', $(this).attr('style').replace(/\bfilter:\s*;*/, ''));

Offensichtlich musste ich eine leere Inline-Filterdeklaration entfernen, damit das CSS wirksam werden konnte. Es gab andere Inline-Regeln, sodass ich das Stilattribut nicht einfach entfernen konnte.

Brandon Hill
quelle
-1

Wenn es helfen kann, füge ich ein Problem mit doppeltem Anführungszeichen hinzu:

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

funktioniert nicht während

$('#element').css('border-color', '');

funktioniert

Merlintintin
quelle