Elimine los atributos CSS "superior" e "izquierdo" con jQuery

Estoy construyendo un mapa arrastrable que cuando se arrastra el mapa se le da al elemento un atributo 'izquierda' y 'superior' con valores para cada uno como tal ...

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

Cuando hago clic en un botón, deseo eliminar el atributo superior e izquierdo del estilo en línea en el div. ¿Es esto posible con jquery?

Los valores predeterminados para CSS topy leftson auto, por lo que establecerlos en eso podría ser equivalente dependiendo de lo que intente hacer:

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

También tiene la opción de eliminar completamente el styleatributo:

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

Sin embargo, si está utilizando otros componentes de jQuery UI, es posible que requieran estilos en línea que no desee eliminar, así que proceda con precaución allí.

Si desea eliminar específicamente los atributos superior e izquierdo y dejar otros, puede hacer esto:

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

O, un equivalente más corto:

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

Puede eliminar todo el contenido del styleatributo haciendo lo siguiente:

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

Y puede eliminar correos específicos stylehaciendo:

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

Simplemente configure la propiedad CSS con una cadena vacía, por ejemplo con el siguiente código:

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

Consulte la documentación de jQuery en CSS .

1. Vaya aquí: API jQuery
2. Ctrl + F para 'eliminar'
3. Leer:

Al establecer el valor de una propiedad de estilo en una cadena vacía, por ejemplo, $ ("#mydiv") .css ("color", ""), se elimina esa propiedad de un elemento si ya se ha aplicado directamente, ya sea en el estilo HTML atributo, a través del método .css () de jQuery, o mediante la manipulación directa del DOM de la propiedad de estilo.

Los documentos le brindan el enfoque actual recomendado para lo que está tratando de lograr, que a menudo puede ahorrarle tiempo porque no tiene que leer de ida y vuelta las guerras de llamas en el desbordamiento de la pila (no importa cuán divertido / esclarecedor pueda ser) !).

Por este informe de error de JQuery

element.removeAttr ('estilo')

element.attr ('estilo', '')

Si quieres eliminarlo todo, puedes hacerlo

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

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

}

entonces si quieres eliminar css prop (s):

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

En mi opinión, la forma más limpia es eliminar la propiedad por completo de la CSSStyleDeclaration del elemento , en lugar de sobrescribirla con algún tipo de valor nulo / cero / predeterminado:

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

}

¡Elimine de forma segura con este complemento!

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

Hay algunos estilos que no se pueden eliminar fácilmente (se me ocurre un desbordamiento)

Una solución alternativa sería crear 2 clases diferentes y agregar / eliminar la que contenga el estilo que desee.

NO es la mejor solución para las propiedades de estilo que se pueden quitar / deshabilitar fácilmente.

Para eliminar estilos CSS, asigne una cadena vacía al estilo

en este caso

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

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