Usuń atrybuty CSS „top” i „left” za pomocą jQuery

Tworzę mapę, którą można przeciągać, a gdy mapa jest przeciągana, elementowi nadawane są atrybuty „left” i „top” z wartościami dla każdego z nich ...

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

Mam przycisk, który po kliknięciu chce usunąć atrybut górny i lewy ze stylu wbudowanego elementu div. Czy jest to możliwe w przypadku jquery?

Domyślne wartości dla CSS topi leftto auto, więc ustawienie ich na takie może być równoważne w zależności od tego, co próbujesz zrobić:

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

Masz również możliwość całkowitego usunięcia styleatrybutu:

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

Jeśli jednak używasz innych składników interfejsu użytkownika jQuery, mogą one wymagać stylów wbudowanych, których nie chcesz usuwać, więc postępuj ostrożnie.

Jeśli chcesz konkretnie usunąć atrybuty górny i lewy oraz pozostawić inne, możesz to zrobić:

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

Lub krótszy odpowiednik:

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

Możesz usunąć całą zawartość styleatrybutu, wykonując:

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

Możesz usunąć określone styleadresy, wykonując:

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

Po prostu ustaw właściwość CSS na pusty ciąg, na przykład za pomocą następującego kodu:

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

Zobacz dokumentację jQuery w CSS .

1. Przejdź tutaj: jQuery API
2. Ctrl + F dla „usuń”
3. Czytać:

Ustawienie wartości właściwości stylu na pusty ciąg - np. $ ("#Mydiv") .css ("color", "") - usuwa tę właściwość z elementu, jeśli została już bezpośrednio zastosowana, czy to w stylu HTML atrybut, poprzez metodę .css () jQuery lub poprzez bezpośrednią manipulację DOM właściwości style.

Dokumenty przedstawiają aktualne, zalecane podejście do tego, co próbujesz osiągnąć, co często może zaoszczędzić czas, ponieważ nie musisz czytać tam iz powrotem wojen płomieni na przepełnieniu stosu (bez względu na to, jak zabawne / pouczające może być !).

Zgodnie z tym raportem o błędzie JQuery

element.removeAttr ('style')

element.attr ('style', '')

Jeśli chcesz usunąć to wszystko, możesz to zrobić

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

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

}

następnie jeśli chcesz usunąć właściwości CSS:

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

Moim zdaniem najczystszym sposobem jest całkowite usunięcie właściwości z CSSStyleDeclaration elementu , zamiast zwykłego nadpisywania jej jakąś wartością null / zero / domyślną:

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

}

Usuń bezpiecznie za pomocą tej wtyczki!

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

Istnieją style, których nie można łatwo usunąć. (Przychodzi na myśl przepełnienie)

Rozwiązaniem byłoby utworzenie 2 różnych klas i dodanie / usunięcie tej zawierającej żądany styl.

NIE jest najlepszym rozwiązaniem dla właściwości stylu, które można łatwo usunąć / wyłączyć.

Aby usunąć style CSS, przypisz do stylu pusty ciąg

w tym przypadku

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

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