web-dev-qa-db-fra.com

Réinitialiser la propriété d'affichage CSS à la valeur par défaut

Est-il possible de remplacer la propriété display par sa valeur par défaut? Par exemple, si je l'ai défini sur none dans un style et que je souhaite le remplacer par un autre avec son style par défaut.

Ou est-ce le seul moyen de savoir quel est le défaut de cet élément et de le régler ensuite? Voudrais ne pas avoir à savoir si l'élément est généralement bloqué, en ligne ou selon ce qui est ...

cssdefault
158
Svish

Si l'utilisation de javascript est autorisée , vous pouvez définir la propriété display sur une chaîne vide. Cela le fera utiliser la valeur par défaut pour cet élément particulier.

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

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

Voici un lien vers un jsbin .

C'est bien parce que vous n'avez pas à vous soucier des différents types d'affichage à revenir (block, inline, inline-block, table-cell, etc.).

Mais, cela nécessite javascript, donc si vous recherchez une solution css uniquement, alors ce n’est pas la solution pour vous.

Remarque: cette option remplace les styles en ligne, mais pas les styles définis dans css .

27
thetallweeks

Non défini display:

Vous pouvez utiliser la valeur unset qui fonctionne à la fois Firefox et Chrome .

display: unset;

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

Non, ce n'est généralement pas possible. Une fois qu'un code CSS (ou HTML) définit une valeur pour une propriété sur un élément, il n'y a aucun moyen de l'annuler et d'indiquer au navigateur d'utiliser sa valeur par défaut.

Il est bien sûr possible de définir une propriété avec une valeur que vous attendez comme valeur par défaut. Cela peut fonctionner assez largement si vous consultez la section Rend de HTML5 CR, reflétant principalement ce que font réellement les navigateurs.

Néanmoins, la réponse est "Non", car les navigateurs peuvent avoir les valeurs par défaut qu’ils préfèrent. Vous devez analyser la raison pour laquelle vous souhaitez rétablir les valeurs par défaut. le problème original peut encore être résolu.

6
Jukka K. Korpela

Si vous avez accès à JavaScript, vous pouvez créer un élément et lire son style calculé.

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'
4
Frederik Krautwald

En ce qui concerne la réponse de BoltClock et de John, j'ai personnellement eu des problèmes avec le mot-clé initial lors de l'utilisation d'IE11. Cela fonctionne bien dans Chrome, mais dans IE, il semble n'avoir aucun effet.

Selon cette réponse, IE ne prend pas en charge le mot-clé initial: affichage Div: l'initiale ne fonctionne pas comme prévu dans ie10 et chrome 29

J'ai essayé de le mettre à blanc à la place comme suggéré ici: comment revenir à la normale après l'affichage: aucun pour la ligne du tablea

Cela a fonctionné et était assez bon pour mon scénario. Bien sûr, pour définir la valeur initiale réelle, la réponse ci-dessus est la seule bonne que j'ai pu trouver.

3
Søren Ullidtz