removeAttr() 未应用？答案

【问题标题】：removeAttr() not applied?removeAttr() 未应用？
【发布时间】：2012-07-25 03:52:39
【问题描述】：

我正在为我当前的项目使用 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

但是我还需要在调整大小事件中再次删除它。

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

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

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

【问题讨论】：

您不能删除 DOM 元素的“样式”属性。（它是一个属性，而不是一个属性。）

标签： javascript jquery zepto

【解决方案1】：

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

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

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

阅读更多here。

【讨论】：

我认为如果在另一个被明确设置之前有一个边距，它需要回到这个。我相信上面的代码不会那样做（虽然我可能错了）......
是的，这只会删除属性，就像请求的问题一样。恢复到以前的值将是另一种情况。

【解决方案2】：

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

CSS：

.myMargin { margin-top : 100px; }

JS：

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

在调整大小事件中：

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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：