用 jQuery 移除 CSS 的“top”和“left”属性答案

【问题标题】：Remove CSS "top" and "left" attributes with jQuery用 jQuery 移除 CSS 的“top”和“left”属性
【发布时间】：2012-03-13 00:30:45
【问题描述】：

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

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

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

【问题讨论】：

是的。至少您可以将它们设置为空值，从而将其删除。
可能重复：Remove CSS attribute using Jquery。那里的答案可能对你有帮助。
请注意，' ' 仅算作空值 ''
一次只删除一个css属性：var cssObject = $('selector').prop('style'); cssObject.removeProperty('top'); cssObject.removeProperty('left');
只是为了记录，设置为空并不总是有效："将样式属性的值设置为空字符串...但是，它不会删除具有在样式表或 - 请参阅 stackoverflow.com/questions/27791484/…

标签： jquery

【解决方案1】：

如果你想专门去掉top和left属性而留下其他的，你可以这样做：

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

或者，更短的等价物：

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

【讨论】：

这是一个比所选答案更好的答案。
是的。这是正确的答案。起初没有意义，因为它看起来像 ".css('top', '')" 只是创建了一个空的 'top' 规则，但不，它完全删除了它。
这是最好的答案。但我想我找到了另一个。我尝试了几个不同的。 .css('left', undefined); 没有改变任何东西。传递 null 也没有做任何事情。但是.css('left', false); 删除了该属性。
正如其他人所建议的，这应该被认为是正确的答案。
@Viktor 请注意，文档明确表示要使用空字符串。我想知道 false 是否会因为某些未记录的类型强制而在未来消失？ api.jquery.com/css

【解决方案2】：

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

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

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

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

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

【讨论】：

通常这种添加到样式属性的覆盖是为了改变默认css值的值；将其设置为 auto 不会将它们重置为默认值。意味着 auto 并不完全相同，那么根本没有价值。所以正确的答案是 $('map').css('top', '');
这个答案是错误的，你不是在删除属性，而是用其他东西替换它们。此外，删除整个样式标签并没有多大意义，可能需要保留一些属性并删除其他属性.. wtrevino 的答案是正确的。
它不是必不可少的选择，所以拥有它很棒！ :) 对于用户名等字段
作为记录，@wtrevino 的答案应该是这里接受的答案。在某些情况下，这个特定的解决方案对我有用，但如果可以的话，我会删除这个答案。不幸的是，既然它被接受了，它不会让我。
这不是正确的答案...@wtrevino 的答案是最正确的。仅当您想从元素中删除所有静态样式时，此答案才有效...在大多数情况下，这不是您想要做的。

【解决方案3】：

您可以通过以下方式删除style 属性中的所有内容：

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

您可以通过以下方式删除特定的styles：

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

【讨论】：

【解决方案4】：

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

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

见jQuery Documentation on CSS。

【讨论】：

不确定为什么这不是公认的答案。实际接受的答案是 hacky，因为它实际上并没有从对象中删除 CSS 属性，这是问题的标题。

【解决方案5】：

去这里：jQuery API
Ctrl + F 表示“删除”
阅读：

将样式属性的值设置为空字符串——例如$( "#mydiv" ).css( "color", "" ) — 从元素中删除该属性如果已经直接应用，是否在HTML样式中属性，通过 jQuery 的 .css() 方法，或者通过直接 DOM 样式属性的操作。

文档为您提供了当前的、推荐的方法来完成您想要完成的工作，这通常可以节省您的时间，因为您不必来回阅读堆栈溢出时的火焰战争（无论多么有趣/有启发性）可能是这样！）。

【讨论】：

【解决方案6】：

每this JQuery bug report

element.removeAttr('style')

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

element.attr('style', '')

【讨论】：

【解决方案7】：

如果您想删除所有内容，您可以这样做

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

【讨论】：

【解决方案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();

【讨论】：

【解决方案9】：

在我看来，最干净的方法是从元素的CSSStyleDeclaration 中完全删除该属性，而不是仅仅用某种空/零/默认值覆盖它：

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

【讨论】：

【解决方案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('color');

【讨论】：

【解决方案11】：

有些样式不能轻易删除。（想到溢出）

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

对于可以轻松删除/禁用的样式属性来说，这不是最佳解决方案。

【讨论】：

【解决方案12】：

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

在这种情况下

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

【讨论】：

【解决方案13】：

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

【讨论】：

这会将其设置为 0，不会删除该属性