Setzen Sie die CSS-Anzeigeeigenschaft auf den Standardwert zurück

Ist es möglich, die Anzeigeeigenschaft mit ihrem Standardwert zu überschreiben? Zum Beispiel, wenn ich es in einem Stil auf "Keine" gesetzt habe und es mit der Standardeinstellung in einem anderen Stil überschreiben möchte.

Oder ist der einzige Weg, um herauszufinden, was der Standard dieses Elements ist, und es dann darauf einzustellen? Ich möchte nicht wissen müssen, ob das Element normalerweise blockiert, inline oder was auch immer ist ...

Die Standardstile eines Browsers werden in seinem User Agent-Stylesheet definiert, dessen Quellen Sie hier finden . Leider scheint die Spezifikation Cascading and Inheritance Level 3 keine Möglichkeit zu bieten, eine Stileigenschaft auf die Standardeinstellung ihres Browsers zurückzusetzen. Es ist jedoch geplant, ein Schlüsselwort dafür in Cascading and Inheritance Level 4 wieder einzuführen - die Arbeitsgruppe hat sich einfach noch nicht auf einen Namen für dieses Schlüsselwort festgelegt (der Link sagt derzeit revert, aber es ist nicht endgültig). Informationen zur Browserunterstützung für revertfinden Sie auf caniuse.com .

Während die Level 3-Spezifikation ein initialSchlüsselwort einführt , setzt das Festlegen einer Eigenschaft auf ihren Anfangswert sie auf ihren Standardwert zurück, wie er durch CSS definiert wurde und nicht wie vom Browser definiert . Der Anfangswert von displayist inline; Dies wird hier angegeben . Das initialSchlüsselwort bezieht sich auf diesen Wert, nicht auf die Standardeinstellung des Browsers. Die Spezifikation selbst macht diesen Hinweis unter der allEigenschaft :

Wenn ein Autor beispielsweise all: initialein Element angibt , blockiert er die gesamte Vererbung und setzt alle Eigenschaften zurück, als ob in den Autoren-, Benutzer- oder Benutzeragentenebenen der Kaskade keine Regeln angezeigt würden.

Dies kann für das Stammelement eines in einer Seite enthaltenen "Widgets" nützlich sein, das die Stile der äußeren Seite nicht erben möchte. Beachten Sie jedoch, dass jeder "Standard" -Stil, der auf dieses Element angewendet wird (z. B. display: blockaus dem UA-Stylesheet für Blockelemente wie <div>), ebenfalls weggeblasen wird.

Ich denke, die einzige Möglichkeit, derzeit reines CSS zu verwenden, besteht darin, den Standardwert des Browsers nachzuschlagen und manuell darauf einzustellen:

div.foo { display: inline-block; }
div.foo.bar { display: block; }

(Eine Alternative zu den oben genannten wäre div.foo:not(.bar) { display: inline-block; }, aber dazu muss der ursprüngliche Selektor geändert und nicht überschrieben werden.)

Wenn die Verwendung von Javascript zulässig ist , können Sie die displayEigenschaft auf eine leere Zeichenfolge setzen. Dadurch wird die Standardeinstellung für dieses bestimmte Element verwendet.

var element = document.querySelector('span.selector');

// Set display to empty string to use default for that element
element.style.display = '';

Hier ist ein Link zu einem jsbin .

Das ist schön , weil Sie (nicht über die verschiedenen Arten von Anzeige zu kümmern zurückzukehren block, inline, inline-block, table-cell, etc.).

Dafür ist jedoch Javascript erforderlich. Wenn Sie also nach einer Nur-CSS-Lösung suchen, ist dies nicht die richtige Lösung für Sie.

Hinweis: Dies überschreibt Inline-Stile, jedoch keine in CSS festgelegten Stile

Unset display:

Sie können den Wert verwenden, unsetder sowohl in Firefox als auch in Chrome funktioniert .

display: unset;

.foo     { display: none;  }
.foo.bar { display: unset; }

Nein, das ist generell nicht möglich. Sobald ein CSS- (oder HTML-) Code einen Wert für eine Eigenschaft eines Elements festlegt, kann dieser nicht mehr rückgängig gemacht und der Browser angewiesen werden, seinen Standardwert zu verwenden.

Es ist natürlich möglich, einer Eigenschaft einen Wert zuzuweisen, den Sie haben erwarten , dass er der Standardwert ist. Dies funktioniert möglicherweise recht häufig, wenn Sie den Abschnitt zum Rendern von HTML5 CR überprüfen , der hauptsächlich die tatsächlichen Funktionen der Browser widerspiegelt.

Die Antwort lautet jedoch "Nein", da Browser möglicherweise beliebige Standardwerte haben. Sie sollten analysieren, aus welchem ​​Grund die Standardeinstellungen wiederhergestellt werden sollen. Das ursprüngliche Problem ist möglicherweise noch lösbar.

Wenn Sie Zugriff auf JavaScript haben , können Sie ein Element erstellen und dessen berechneten Stil lesen.

function defaultValueOfCssPropertyForElement(cssPropertyName, elementTagName, opt_pseudoElement) {
    var pseudoElement = opt_pseudoElement || null;
    var element = document.createElement(elementTagName);
    document.body.appendChild(element);
    var computedStyle = getComputedStyle(element, pseudoElement)[cssPropertyName];
    element.remove();
    return computedStyle;
}

// Usage:
defaultValueOfCssPropertyForElement('display', 'div'); // Output: 'block'
defaultValueOfCssPropertyForElement('content', 'div', ':after'); // Output: 'none'

In Bezug auf die Antwort von BoltClock und John hatte ich persönlich Probleme mit dem ursprünglichen Schlüsselwort bei der Verwendung von IE11. Es funktioniert gut in Chrome, aber im IE scheint es keine Wirkung zu haben.

Entsprechend dieser Antwort unterstützt IE das anfängliche Schlüsselwort nicht: Div display: initial funktioniert nicht wie in ie10 und chrome 29 vorgesehen

Ich habe versucht, es stattdessen leer zu setzen, wie hier vorgeschlagen: So kehren Sie nach der Anzeige zum Normalzustand zurück: Keine für Tabellenzeile

Das hat funktioniert und war gut genug für mein Szenario. Um den tatsächlichen Anfangswert festzulegen, ist die obige Antwort natürlich die einzig gute, die ich finden konnte.