Remova os atributos CSS "top" e "left" com o jQuery

Estou construindo um mapa arrastável que, quando o mapa é arrastado, o elemento recebe um atributo 'left' e 'top' com valores para cada um ...

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

Eu tenho um botão no qual desejo remover o atributo superior e esquerdo do estilo embutido na div quando clicado. Isso é possível com o jquery?

Os valores padrão para CSS tope leftsão auto, portanto, defini-los para isso pode ser equivalente, dependendo do que você está tentando fazer:

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

Você também tem a opção de remover completamente o styleatributo:

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

No entanto, se você estiver usando outros componentes da interface do usuário do jQuery, eles podem exigir estilos em linha que você não deseja remover, portanto, continue com cuidado.

Se você deseja remover especificamente os atributos superior e esquerdo e deixar outros, faça o seguinte:

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

Ou, um equivalente mais curto:

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

Você pode remover todo o conteúdo do styleatributo fazendo:

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

E você pode remover styles específicos fazendo:

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

Basta definir a propriedade CSS com uma sequência vazia, por exemplo, com o seguinte código:

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

Veja a documentação do jQuery em CSS .

1. Acesse aqui: API jQuery
2. Ctrl + F para 'remover'
3. Ler:

Definir o valor de uma propriedade de estilo como uma sequência vazia - por exemplo, $ ("#mydiv") .css ("color", "") - remove essa propriedade de um elemento se já tiver sido aplicada diretamente, seja no estilo HTML atributo, pelo método .css () do jQuery ou pela manipulação direta do DOM da propriedade style.

Os documentos fornecem a abordagem atual e recomendada para o que você está tentando realizar, o que geralmente poupa tempo, porque você não precisa ler e avançar guerras de chamas em excesso de pilha (não importa o quão divertido / esclarecedor possa ser !).

Por este relatório de bug do JQuery

element.removeAttr ('style')

element.attr ('estilo', '')

Se você deseja remover tudo isso, você pode fazer

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

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

}

se você deseja remover o (s) suporte (s) css:

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

Na minha opinião, a maneira mais limpa é remover a propriedade completamente do CSSStyleDeclaration do elemento , em vez de substituí-la por algum tipo de valor nulo / zero / padrão:

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

}

Exclua com segurança com este plugin!

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

Existem alguns estilos que não podem ser facilmente removidos.

Uma solução alternativa seria criar 2 classes diferentes e adicionar / remover a que contém o estilo desejado.

NÃO é a melhor solução para propriedades de estilo que podem ser facilmente removidas / desabilitadas.

Para remover estilos css, atribua uma string vazia ao estilo

nesse caso

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

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