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

你可以制作第二堂课，只是从你的元素中添加/删除它吗？

.margin {
    margin: 4px 5px 6px 7px;
    color: red;
}
.noMargin {
    margin: 0px
    color: red;
}

document.getElementById("class").classList.add('margin');    
document.getElementById("class").classList.remove('noMargin');

document.getElementById("class").classList.add('noMargin');
document.getElementById("class").classList.remove('margin');

Answer 2

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

＆＃13;

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

＆＃13;

.no-margin {
  margin: 0px;
}

.margin {
  margin: 15px 15px 15px 15px;
}

＆＃13;

<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>

＆＃13;

希望这很清楚。

Answer 3

对Scath的回答略有改动

.margin {
    margin: 4px 5px 6px 7px;
    color: red;
}
.margin.noMargin {
    margin: 0px;
}

然后你要做的就是添加/删除noMargin类。更具体的css规则优先。

Answer 4

其他答案都很好，只是想分享另一种方式。您可以保留基本CSS样式规则：

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

然后像其他人建议的那样添加一个noMargin类：

.noMargin {
    margin: 0; !important
}

然后，使用toggleClass打开/关闭它：

document.getElementById('class').classList.toggleClass('noMargin');

这里的好处是A）只有一行代码来打开/关闭边距，B）只有一个额外的CSS规则，而C）在切换之前不必担心边距当前是打开还是关闭它

如何禁用CSS规则？

4 个答案: