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

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