javascript - 通过 javascript 临时更改 css

Question

我在我的网站上使用自定义切换开关，可以打开或关闭。根据它是 ON 还是 OFF(选中或未选中)，有不同的 CSS 类应用于开关并更改样式。

我想使用 javascript 打开/关闭此切换开关。然而，状态“已检查/未检查” 的变化不会产生变化。这导致我不得不调整开关的 CSS 样式来打开它，例如关闭。

但是，这导致了现在的问题。当我使用 javascript 更改 CSS 时，我基本上是直接向元素添加样式。这导致正常的切换开关 CSS 不再工作，因为元素样式会覆盖任何类样式。如果我为 switch 分配一个额外的类，则正常样式会覆盖该类。使用 !important 不是一个选项，因为它永久保持OFF/ON

有什么方法可以将 CSS 应用于元素，而不自动禁用默认的 CSS 样式更改？ 比如设置 CSS 样式直到下一次正常更改发生？

HTML

<div class="onoffswitch active" id="recurringdiv">
  <p>Recurring</p> 
  <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked=""> 
  <label class="onoffswitch-label" for="myonoffswitch" data-click-state="0" id="recurringfield"> 
    <span class="onoffswitch-inner custom1"></span> 
    <span class="onoffswitch-switch custom2"></span>
  </label> 
</div>

JS

$(document).ready(function() {
  $('.onoffswitch-label').on('click', function() {
    if ($(this).attr('data-click-state') == 1) {
      $(this).attr('data-click-state', 0)
      /*Click State 1 finish*/
    } else {
      $(this).attr('data-click-state', 1)
      /*Click State 2 finish*/
    }
  });
});

<!-- This is the autopay -->
$(document).ready(function() {
  $('.auto-onoffswitch-label').on('click', function() {
    if ($(this).attr('data-click-state') == 1) {
      $(this).attr('data-click-state', 0)
      /*Click State 1 finish*/
    } else {
      $(this).attr('data-click-state', 1)
      /*Click State 2 finish*/
    }
  });
});

CSS

.auto-onoffswitch-checkbox:checked + .auto-onoffswitch-label .auto-onoffswitch-switch {
  right: 0px;
}
.auto-onoffswitch-switch {
  display: block;
  width: 18px;
  margin: 6px;
  background: #FFFFFF;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 56px;
  border: 2px solid #a9a9a9;
  border-radius: 20px;
  transition: all 0.3s ease-in 0s;
}

Answer 1

如果您无法使用 CSS/普通 jquery 更改元素的状态，我建议您使用点击事件。

if (condition == true) {
jQuery(".onoffswitch-switch").trigger('click');
}

很简单，应该可以解决问题