Supprimez les attributs CSS «haut» et «gauche» avec jQuery

Je construis une carte déplaçable qui, lorsque la carte est déplacée, donne à l'élément un attribut `` gauche '' et `` haut '' avec des valeurs pour chacun ainsi ...

<div class="map" style="top:200px; left:100px;">Map</div>

J'ai un bouton pour lequel je veux supprimer l'attribut supérieur et gauche du style en ligne sur le div lorsque vous cliquez dessus, est-ce possible avec jquery?

Les valeurs par défaut pour CSS topet leftsont auto, donc leur définition peut être équivalente en fonction de ce que vous essayez de faire:

$('.map').css('top', 'auto').css('left', 'auto');

Vous avez également la possibilité de supprimer complètement l' styleattribut:

$('.map').removeAttr('style');

Cependant, si vous utilisez d'autres composants de l'interface utilisateur jQuery, ceux-ci peuvent nécessiter des styles en ligne que vous ne souhaitez pas supprimer, alors procédez avec prudence.

Si vous souhaitez supprimer spécifiquement les attributs supérieur et gauche et en laisser d'autres, vous pouvez le faire:

$('.map').css('top', '').css('left', '');

Ou, un équivalent plus court:

$('.map').css({
    'top': '',
    'left': ''
});

Vous pouvez supprimer tout le contenu de l' styleattribut en procédant comme suit:

$('.map').removeAttr('style');

Et vous pouvez supprimer des styles spécifiques en faisant:

$('.map').css('top', '');
$('.map').css('left', '');

Définissez simplement la propriété CSS avec une chaîne vide, par exemple avec le code suivant:

$('#mydiv').css('color', '');

Voir la documentation jQuery sur CSS .

1. Allez ici: API jQuery
2. Ctrl + F pour «supprimer»
3. Lis:

Définir la valeur d'une propriété de style sur une chaîne vide - par exemple $ ("#mydiv") .css ("color", "") - supprime cette propriété d'un élément si elle a déjà été appliquée directement, que ce soit dans le style HTML attribut, via la méthode .css () de jQuery, ou via la manipulation DOM directe de la propriété style.

La documentation vous donne l'approche actuelle et recommandée pour ce que vous essayez d'accomplir, ce qui peut souvent vous faire gagner du temps car vous n'avez pas à lire les guerres de flamme en cas de débordement de pile (peu importe à quel point cela peut être amusant / instructif. !).

Selon ce rapport de bogue JQuery

element.removeAttr ('style')

element.attr ('style', '')

Si vous souhaitez tout supprimer, vous pouvez le faire

$('.map').removeAttr('style');

$.fn.removeCss=function(prop){
   if(!prop){
          return $(this).removeAttr('style').removeAttr('class');
     }
    else{
         return $(this).css(prop,null);
    }

}

puis si vous souhaitez supprimer le (s) accessoire (s) css:

    $('#mydiv').removeCss('color');
//To remove all prop Css
    $('#mydiv').removeCss();

À mon avis, le moyen le plus propre est de supprimer complètement la propriété de la déclaration CSSStyleDeclaration de l'élément , au lieu de simplement l'écraser avec une sorte de valeur nulle / zéro / par défaut:

$(".foo").prop("style").removeProperty("top");
$(".foo").prop("style").removeProperty("left");
$(".foo").prop("style").removeProperty("background-color");

$.fn.removeCss=function(toDelete){

    var props=$(this).attr('style').split(';');
var tmp=-1;
for( var p=0;p<props.length; p++){if(props[p].indexOf(toDelete)!==-1){tmp=p}};
if(tmp!==-1){

   delete props[tmp];
}

  return $(this).attr('style',props.join(';')+';');

}

Supprimez en toute sécurité avec ce plugin!

$ ('myDiv'). removeCss ('couleur');

Certains styles ne peuvent pas être facilement supprimés (le débordement vient à l'esprit)

Une solution de contournement serait de créer 2 classes différentes et d'ajouter / supprimer celle contenant le style souhaité.

PAS la meilleure solution pour les propriétés de style qui peuvent être facilement supprimées / désactivées.

Pour supprimer les styles CSS, attribuez une chaîne vide au style

dans ce cas

$('.map').css({top:'',left:''});

 $("#map").css("top", "0"); 
 $("#map").css("left", "0");