Question

我正在构建一个可拖动的地图，当拖动地图时，元素会被赋予“左”和“顶部”属性，每个属性的值都是如此......

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

我有一个按钮，我想在点击时从div上的内联样式中删除top和left属性，是否可以使用jquery？

Answer 1

如果你想专门删除top和left属性并留下其他属性，你可以这样做：

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

或者，更短的等价物：

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

Answer 2

CSS top和left的默认值为auto，因此根据您尝试执行的操作设置它们可能相同：

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

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

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

但是，如果您正在使用其他jQuery UI组件，那么这些组件可能需要您不希望删除的内联样式，因此请谨慎使用。

Answer 3

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

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

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

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

Answer 4

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

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

请参阅jQuery Documentation on CSS。

Answer 5

转到此处：jQuery API
Ctrl + F表示＆＃39;删除＆＃39;
阅读：

将样式属性的值设置为空字符串 - 例如$（＆＃34;＃mydiv＆＃34; ）.css（＆＃34; color＆＃34;，＆＃34;＆＃34;） - 从元素中删除该属性如果已经直接应用，则是否为HTML样式属性，通过jQuery的.css（）方法，或通过直接DOM 操纵风格属性。

文档为您提供了当前推荐的方法，可以为您实现的目标提供方法，这通常可以节省您的时间，因为您不必在堆栈溢出时来回读取火焰战争（无论如何多么有趣/有启发性！）。

Answer 6

每this JQuery bug report

element.removeAttr('style')

在基于Webkit的浏览器中不能始终如一地工作。例如，我在iOS 6.1上遇到了这个问题。修复方法是使用：

element.attr('style', '')

Answer 7

如果你想删除所有这些，你可以

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

Answer 8

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

Answer 9

在我看来，最干净的方法是从元素的CSSStyleDeclaration中完全删除属性，而不是仅使用某种null / zero / default值覆盖它：

$(".foo").prop("style").removeProperty("top");
$(".foo").prop("style").removeProperty("left");
$(".foo").prop("style").removeProperty("background-color");

Answer 10

$.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（ '颜色'）;

Answer 11

有些款式无法轻易删除。（想到溢出）

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

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

Answer 12

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

Answer 13

要删除css样式，请为样式

指定一个空字符串

在这种情况下

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

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

13 个答案: