Rimuovere gli attributi CSS "top" e "left" con jQuery

Sto costruendo una mappa trascinabile che quando la mappa viene trascinata all'elemento viene assegnato un attributo 'left' e 'top' con valori per ciascuno così ...

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

Ho un pulsante che voglio rimuovere l'attributo superiore e sinistro dallo stile in linea sul div quando si fa clic, è possibile con jquery?

I valori predefiniti per CSS tope leftsono auto, quindi impostarli su quello potrebbe essere equivalente a seconda di ciò che stai cercando di fare:

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

Hai anche la possibilità di rimuovere completamente l' styleattributo:

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

Tuttavia, se si utilizzano altri componenti dell'interfaccia utente jQuery, questi potrebbero richiedere stili incorporati che non si desidera rimuovere, quindi procedere con cautela lì.

Se desideri rimuovere in modo specifico gli attributi superiore e sinistro e lasciare altri, puoi farlo:

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

Oppure, un equivalente più breve:

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

Puoi rimuovere tutto il contenuto styledell'attributo facendo:

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

E puoi rimuovere specifici messaggi stylefacendo:

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

Basta impostare la proprietà CSS con una stringa vuota, ad esempio con il seguente codice:

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

Vedi la documentazione di jQuery su CSS .

1. Vai qui: API jQuery
2. Ctrl + F per 'rimuovi'
3. Leggere:

L'impostazione del valore di una proprietà di stile su una stringa vuota, ad esempio $ ("#mydiv") .css ("color", "") - rimuove quella proprietà da un elemento se è già stata applicata direttamente, sia nello stile HTML attributo, tramite il metodo .css () di jQuery o tramite la manipolazione DOM diretta della proprietà style.

I documenti ti offrono l'approccio attuale e raccomandato per ciò che stai cercando di realizzare, che spesso può farti risparmiare tempo perché non devi leggere avanti e indietro guerre di fiamma su overflow dello stack (non importa quanto divertente / illuminante possa essere !).

Secondo questo bug report di JQuery

element.removeAttr ( 'stile')

element.attr ('style', '')

Se vuoi rimuovere tutto ciò che puoi fare

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

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

}

quindi se vuoi rimuovere i css prop:

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

A mio avviso, il modo più pulito è rimuovere completamente la proprietà dalla CSSStyleDeclaration dell'elemento , invece di sovrascriverla con una sorta di valore null / zero / default:

$(".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(';')+';');

}

Elimina in modo sicuro con questo plugin!

$ ( 'MyDiv') removeCss ( 'colore.');

Ci sono alcuni stili che non possono essere rimossi facilmente (mi viene in mente l'overflow)

Una soluzione alternativa sarebbe quella di creare 2 classi diverse e aggiungere / rimuovere quella contenente lo stile desiderato.

NON è la soluzione migliore per le proprietà di stile che possono essere facilmente rimosse / disabilitate.

Per rimuovere gli stili CSS, assegnare una stringa vuota allo stile

in questo caso

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

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