web-dev-qa-db-fra.com

supprimer/réinitialiser les fichiers CSS hérités d'un élément

Je sais que cette question a déjà été posée, mais avant de la marquer comme une copie, je tiens à vous dire que ma situation est un peu différente de celle que j’ai trouvée sur Internet.

Je construis et intègre un script que les gens peuvent mettre sur leurs sites. Ce script crée un div avec une certaine largeur/hauteur et des informations.

Mon problème est que certains sites Web déclarent également des styles pour div qui sont hérités par ma div.

par exemple:

div{
    background-color:red;
}

donc si je ne mets pas de couleur de fond à ma div, elle sera rouge même si je ne le veux pas.

La seule solution que je propose consiste à écraser autant de propriétés css que mon div affichera exactement comme je le veux .. Le problème de cette solution est qu’il ya trop de propriétés css à écraser et que je veux que mon script soit aussi léger que cela puisse être.

Donc, ma question est la suivante: si vous connaissez une autre solution à mon problème… peut être en css/javascript/jQuery.

Merci

javascriptjquerycssembedded-script
29
Doua Beri

"Réinitialiser" les styles pour un élément spécifique n'est pas possible, vous devrez écraser tous les styles dont vous n'avez pas besoin. si vous faites cela directement avec css ou si vous utilisez jquery pour appliquer les styles, cela dépend de ce qui est plus facile pour vous (mais je ne recommanderai pas d'utiliser javascript/jquery pour cela, car c'est totalement inutile.

Si votre div est une sorte de "widget" pouvant être inclus dans d'autres sites, vous pouvez essayer de l'envelopper dans un iframe . cela "réinitialisera" les styles, car son contenu est un autre document, mais peut-être que cela affecte le fonctionnement de votre widget (ou le casse complètement), ce qui pourrait ne pas être possible dans votre cas.

17
oezi

Définissez uniquement les propriétés CSS pertinentes/importantes.

Exemple (ne modifiez que les attributs qui peuvent donner à votre div une apparence complètement différente):

background: #FFF;
border: none;
color: #000;
display: block;
font: initial;
height: auto;
letter-spacing: normal;
line-height: normal;
margin: 0;
padding: 0;
text-transform: none;
visibility: visible;
width: auto;
Word-spacing: normal;
z-index: auto;

Choisissez un sélecteur très spécifique, tel que div#donttouchme, <div id="donttouchme"></div>. De plus, vous pouvez ajouter `! Important avant chaque point-virgule dans la déclaration. Vos clients tentent délibérément de gâcher votre mise en page lorsque cette option échoue.

11
Rob W

Vous pouvez essayer de remplacer le CSS et utiliser auto

Je ne pense pas que cela fonctionnera spécifiquement avec la couleur, mais j'ai rencontré un problème dans lequel j'avais une propriété parent telle que

.parent {
   left: 0px;
}

et puis j'ai pu définir mon enfant avec quelque chose comme

.child {
   left: auto;
}

et effectivement "réinitialiser" la propriété.

7
Seth

Essayez ceci: Créez une div simple sans style ni contenu en dehors de la div rouge. Vous pouvez maintenant utiliser une boucle sur tous les styles de la variable div et affecter ensuite à votre div intérieure pour réinitialiser tous les styles.

Bien sûr, cela ne fonctionne pas si quelqu'un assigne des styles à toutes les divs (c'est-à-dire sans utiliser de classe. CSS serait div { ... }).

La solution habituelle pour ce type de problème consiste à donner à votre div une classe distincte. Ainsi, les concepteurs Web des sites peuvent ajuster le style de votre div pour s’intégrer au reste de la conception.

1
Aaron Digulla

D'après ce que j'ai compris, vous voulez utiliser une div qui n'hérite que de la vôtre. Comme mentionné dans la réponse précédente, vous ne pouvez pas réinitialiser complètement un héritage div. Cependant, ce qui a fonctionné pour moi avec ce problème a été d’utiliser un autre élément - un élément peu fréquent et certainement pas utilisé dans la page HTML actuelle. Un bon exemple consiste à l’utiliser au lieu de le personnaliser pour qu’il ressemble à votre idéal.

area { background-color : red; }
0
Dorceus Valjery Welinghton

vous pouvez utiliser cette option ci-dessous.

<style>
  div:not(.no_common_style){
      background-color:red;
  }
</style>

maintenant, si vous ne voulez pas appliquer de style par défaut, vous pouvez utiliser la classe 'no_common_style' en tant que classe . ex:

<div class="no_common_style">
  It will not display in red
</div>
0
bharatpatel

Tant qu’il s’agit d’attributs tels que des classes et des identifiants, vous pouvez les supprimer à l’aide de modificateurs de classe javascript/jQuery.

document.getElementById("MyElement").className = "";

Il n'y a aucun moyen de supprimer une balise CSS spécifique autre que de la remplacer (ou d'utiliser un autre élément).

0
AlexBay