使用jQuery删除CSS“ top”和“ left”属性

我正在构建一个可拖动的地图，当拖动地图时，该元素将被赋予“ left”和“ top”属性，并且每个属性的值都这样……

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

我有一个按钮，当我单击时，我想从div的内联样式中删除top和left属性，这对于jquery可能吗？

CSS top和的默认值left是auto，因此根据您要执行的操作将它们设置为该值可能是等效的：

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

您还可以选择完全删除该style属性：

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

但是，如果您使用的是其他jQuery UI组件，则这些组件可能需要不需要删除的内联样式，因此请谨慎操作。

如果要专门删除顶部和左侧属性并保留其他属性，可以执行以下操作：

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

或者，更短的等效项：

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

您可以style通过执行以下操作删除属性中的所有内容：

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

您可以style通过执行以下操作删除特定的：

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

只需使用空字符串设置CSS属性，例如，使用以下代码：

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

请参阅CSS上的jQuery文档。

1. 转到此处：jQuery API
2. Ctrl + F代表“删除”
3. 读：

将样式属性的值设置为空字符串，例如$（“ #mydiv”）.css（“ color”，“”）-如果该属性已被直接应用（无论是HTML样式），则将其从元素中删除。属性，通过jQuery的.css（）方法或通过对style属性的直接DOM操作。

该文档为您提供了当前推荐的解决方案，通常可以节省您的时间，因为您不必在堆栈溢出时来回读取火焰战争（无论可能会带来多大的乐趣/启发） ！）。

根据此JQuery错误报告

element.removeAttr（'style'）

element.attr（'style'，''）

如果要删除所有内容，可以执行

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

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

}

然后，如果您想删除css prop（s）：

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

我认为最干净的方法是从元素的CSSStyleDeclaration中完全删除属性，而不是仅使用某种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(';')+';');

}

使用此插件安全删除！

$（'myDiv'）。removeCss（'color'）;

有些样式无法轻易删除。

一种解决方法是创建2个不同的类，然后添加/删除包含所需样式的类。

并非可以轻松删除/禁用的样式属性的最佳解决方案。

要删除CSS样式，请为样式分配一个空字符串

在这种情况下

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

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