javascript - 如何禁用 CSS 规则？

Question

我有以下 CSS 规则

#class {
    margin: 4px 5px 6px 7px;
    color: red;
}

我平时做的是

document.getElementById('class').style.margin= '0px';

然后在重置之后，我进行相同的步骤

document.getElementById('class').style.margin= '4px 5px 6px 7px';

如何使用 JavaScript\JQuery 而不是将值更改为 0 然后将其重置为 4px 5px 来禁用边距6px 7px

Answer 1

这里最简单的解决方案是使用类，并使用 jquery 或 javascript 来更改元素的类，只要您想要不同的行为，就像我在下面显示的示例中单击按钮一样。

$("#add").click(function() {
  $("#exd").addClass('margin');
  $("#exd").removeClass('no-margin');
});

$("#rem").click(function() {
  $("#exd").removeClass('margin');
  $("#exd").addClass('no-margin');
});

.no-margin {
  margin: 0px;
}

.margin {
  margin: 15px 15px 15px 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="exd">Example Div</div>

<button id="add">Add margin</button>
<button id="rem">Remove margin</button>

希望这是清楚的。