Comment supprimer la propriété Left lorsque la position: absolue?


137

Je remplace le CSS du site par une version RTL lorsqu'une langue spécifique est choisie.

J'ai un élément qui doit avoir un positionnement absolu. Dans la version LTR, je fais left: 0px;et il est aligné à gauche; dans la version RTL, je veux faire le contraire right, mais la leftpropriété n'est pas remplacée donc elle reste toujours à gauche.

  • J'ai essayé de pirater avec !important, mais cela n'a pas fonctionné.
  • J'ai essayé le réglage left: none, mais cela n'a pas fonctionné.

Comment puis-je le définir sur aucun ou le supprimer complètement lors du remplacement?


Pour supprimer uniquement un attribut css spécifique tel que, leftutilisez:var cssObject = $('selector').prop('style'); cssObject.removeProperty('left');
ilgaar

Réponses:


321
left:auto;

Cela reviendra par défaut leftà la valeur par défaut du navigateur.


Donc, si vous avez votre balisage / CSS comme:

<div class="myClass"></div>

.myClass
{
  position:absolute;
  left:0;
}

Lors de la configuration de RTL, vous pouvez passer à:

<div class="myClass rtl"></div>

.myClass
{
  position:absolute;
  left:0;
}
.myClass.rtl
{
  left:auto;
  right:0;
}

20

Dans le futur, on utiliserait left: unset;pour annuler la valeur de left.

À partir d'aujourd'hui, le 4 novembre 2014 unsetn'est pris en charge que par Firefox.

En savoir plus sur unset dans MDN.

Je suppose que nous pourrons l'utiliser vers 2022, lorsque IE 11 sera correctement supprimé.


IE met le «IE» dans «Je ne mourrai jamais».
adam rowe

1
À la fin de l'année 2017, Microsoft Edge build 10565+ le prend en charge
Taras Yaremkiv

Je viens de l'utiliser pour effacer une rightposition pour un changement réactif - a parfaitement fonctionné (dans Chrome)
SenAnan

1
left: initial

Cela leftrétablira également la valeur par défaut du navigateur.

Mais important de savoir property: initialn'est pas pris en charge dans IE.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.