Entfernen Sie die CSS-Attribute "top" und "left" mit jQuery

Ich baue eine ziehbare Karte, bei der das Element beim Ziehen der Karte ein Attribut 'left' und 'top' mit Werten für jede erhält ...

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

Ich habe eine Schaltfläche, mit der ich das obere und linke Attribut aus dem Inline-Stil auf dem div entfernen möchte, wenn ich darauf klicke. Ist dies mit jquery möglich?

Die Standardwerte für CSS topund leftsind. autoJe nachdem, was Sie tun möchten, sind sie möglicherweise gleichwertig.

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

Sie haben auch die Möglichkeit, das styleAttribut vollständig zu entfernen :

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

Wenn Sie jedoch andere jQuery-UI-Komponenten verwenden, sind möglicherweise Inline-Stile erforderlich, die nicht entfernt werden sollen. Gehen Sie daher dort vorsichtig vor.

Wenn Sie die oberen und linken Attribute gezielt entfernen und andere verlassen möchten, können Sie dies tun:

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

Oder ein kürzeres Äquivalent:

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

Sie können den gesamten Inhalt des styleAttributs entfernen , indem Sie Folgendes tun:

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

Und Sie können bestimmte styles entfernen, indem Sie Folgendes tun:

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

Setzen Sie einfach die CSS-Eigenschaft mit einer leeren Zeichenfolge, beispielsweise mit dem folgenden Code:

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

Siehe jQuery-Dokumentation zu CSS .

1. Gehen Sie hier: jQuery API
2. Strg + F für 'Entfernen'
3. Lesen:

Durch Festlegen des Werts einer Stileigenschaft auf eine leere Zeichenfolge - z. B. $ ("#mydiv") .css ("color", "") - wird diese Eigenschaft aus einem Element entfernt, wenn sie bereits direkt angewendet wurde, sei es im HTML-Stil Attribut, über die .css () -Methode von jQuery oder durch direkte DOM-Manipulation der Stileigenschaft.

Die Dokumente geben Ihnen den aktuellen, empfohlenen Ansatz für das, was Sie erreichen möchten. Dies kann Ihnen oft Zeit sparen, da Sie keine Flammenkriege beim Stapelüberlauf vorlesen müssen (egal wie lustig / aufschlussreich das sein mag !).

Gemäß diesem JQuery-Fehlerbericht

element.removeAttr ('style')

element.attr ('style', '')

Wenn Sie alles entfernen möchten, können Sie dies tun

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

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

}

dann, wenn Sie CSS-Requisiten entfernen möchten:

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

Meiner Meinung nach besteht der sauberste Weg darin, die Eigenschaft vollständig aus der CSSStyleDeclaration des Elements zu entfernen , anstatt sie nur mit einer Art Null / Null / Standardwert zu überschreiben:

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

}

Mit diesem Plugin sicher löschen!

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

Es gibt einige Stile, die nicht einfach entfernt werden können (Überlauf fällt mir ein)

Eine Problemumgehung besteht darin, zwei verschiedene Klassen zu erstellen und die Klasse hinzuzufügen / zu entfernen, die den gewünschten Stil enthält.

NICHT die beste Lösung für Stileigenschaften, die leicht entfernt / deaktiviert werden können.

Um CSS-Stile zu entfernen, weisen Sie dem Stil eine leere Zeichenfolge zu

in diesem Fall

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

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