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

Remove CSS "top" and "left" attributes with jQuery

提问by Liam

Im building a draggable map that when the map is dragged the element is given a 'left' and 'top' attribute with values for each as so...

我正在构建一个可拖动的地图，当地图被拖动时，元素被赋予一个 'left' 和 'top' 属性，每个属性都有值......

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

I have a button that I want to remove the top and left attribute from the inline style on the div when clicked, Is this possible with jquery?

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

采纳答案by Rob Hruska

The default values for CSS topand leftare auto, so setting them to that might be equivalent depending on what you're trying to do:

CSStop和leftare的默认值auto，因此将它们设置为可能等效，具体取决于您要执行的操作：

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

You also have the option of wholly removing the styleattribute:

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

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

However, if you're using other jQuery UI components, those may require inline styles that you don't want to be removed, so proceed with caution there.

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

回答by wtrevino

If you want to specifically remove top and left attributes and leave others, you can do this:

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

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

Or, a shorter equivalent:

或者，更短的等价物：

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

回答by Anish Gupta

You can remove all of the contents in the styleattribute by doing:

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

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

And you can remove specific styles by doing:

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

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

回答by khotyn

Simply set the CSS property with an empty string, for example with the following code:

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

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

See jQuery Documentation on CSS.

请参阅CSS 上的 jQuery 文档。

回答by Jacob McKay

1. Go here: jQuery API
2. Ctrl + F for 'remove'
3. Read:

1. 去这里：jQuery API
2. Ctrl + F 用于“删除”
3. 读：

Setting the value of a style property to an empty string — e.g. $( "#mydiv" ).css( "color", "" ) — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .css() method, or through direct DOM manipulation of the style property.

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

The docs give you the current, recommended approach for what you're trying to accomplish, which can often save you time because you don't have to read back and forth flame wars on stack overflow (no matter how fun/enlightening that may be!).

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

回答by gnmerritt

Per this JQuery bug report

根据这个 JQuery 错误报告

element.removeAttr('style')

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

element.attr('style', '')

回答by Abdennour TOUMI

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

}

then if you want to remove css prop(s) :

那么如果你想删除 css prop(s) ：

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

回答by romo

If you want to remove all of it you can do

如果你想删除所有你可以做的

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

回答by Martin

In my opinion the cleanest way is to remove the property completely from the element's CSSStyleDeclaration, instead of just overwriting it with some kind of null/zero/default value:

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

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

回答by faboulaws

To remove css styles assign an empty string to the style

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

in this case

在这种情况下

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