用jQuery去掉CSS "top“和"left”属性

Question

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

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

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

Answer 1

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

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

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

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

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

Answer 2

如果您希望专门删除top和left属性，而保留其他属性，则可以执行以下操作：

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

或者，更短的等价物：

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

Answer 3

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

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

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

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