Question

我正在使用zepto.js作为我当前的项目，该项目与jquery具有相同的removeAttr()方法。

我将margin-top应用于一堆元素 - 工作正常。

var $apply = $('aside[role="sub"], aside[role="event-info"], aside[role="attend"]');
$apply.css('margin-top', '100px'); //works fine

但是我还需要在resize-event中再次删除它。

if ( $(window).width() <= 984 ) {
    //$apply.removeAttr('style'); //doesn't take effect
    $apply.css('margin-top', '0'); //works fine
    console.log('< 984');       
}

所以我可以将margin-top设置回0，但无法从选择器中完全删除样式属性。

任何想法为什么？我没有得到任何错误，它只是没有生效。

Answer 1

来自http://api.jquery.com/css/

将样式属性的值设置为空字符串 - 例如 $（'＃mydiv'）。css（'color'，''） - 从元素中删除该属性 如果已经直接应用，则是否为HTML样式属性，通过jQuery的.css（）方法，或通过直接DOM 操纵样式属性。 但是，它不会删除已在样式表或。中应用CSS规则的样式元件。

因此，您可以使用$apply.css('margin-top', '')删除margin-top样式。

使用.removeClass()删除元素中的所有样式。

Answer 2

删除它的正确方法是在使用.css时不设置值。

$apply.css('margin-top', ''); // remove property

当属性的值为空时，将删除该属性。

了解更多here。

Answer 3

我建议你创建一个你添加和删除的CSS类。这样，您可以轻松地在一个位置修改边距值，而不必在多个位置更改它。

CSS：

.myMargin { margin-top : 100px; }

JS：

var $apply = $('aside[role="sub"], aside[role="event-info"], aside[role="attend"]');
$apply.addClass("myMargin");

在resize事件中：

if ( $(window).width() <= 984 ) {
    $apply.removeClass("myMargin");
    console.log('< 984');       
}

removeAttr（）没有应用？

3 个答案: