Supprimer les attributs CSS "top" et "left" avec jQuery

Question

Je construis une carte glissante. Lorsque la carte est glissée, l'élément reçoit un attribut 'left' et 'top' avec des valeurs pour chacun d'entre eux comme suit....

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

J'ai un bouton dont je veux supprimer les attributs haut et gauche du style en ligne sur le div lorsqu'il est cliqué. Est-ce possible avec jquery ?

Answer 1

Si vous souhaitez supprimer spécifiquement les attributs haut et gauche et laisser les autres, vous pouvez le faire :

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

Ou, un équivalent plus court :

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

Answer 2

Les valeurs par défaut de CSS top y left sont auto Le fait de les définir ainsi peut être équivalent 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'option style attribut :

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

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

Answer 3

Vous pouvez supprimer tout le contenu de la section style attribut en faisant :

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

Et vous pouvez supprimer des style en faisant :

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

Answer 4

Il suffit de définir la propriété CSS avec une chaîne vide, par exemple avec le code suivant :

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

Ver Documentation de jQuery sur CSS .

Answer 5

1. Allez-y : API jQuery
2. Ctrl + F pour "supprimer".
3. Lisez :

Le fait de 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 l'attribut HTML style HTML, par la méthode .css() de jQuery ou par la manipulation directe de la propriété de style dans le DOM. de la propriété de style.

Les documents vous donnent 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 mots sur stack overflow (aussi amusant/éclairant que cela puisse être !).