temporary css changes by javascript

Question

I am using a custom toggle switch on my website, which can be switched ON or OFF. Depending if it is ON or OFF (checked or unchecked) there are different CSS classes applying to the switch and changing the style.

I want to turn this toggle switch on / off using javascript. However a change of the status "checked / unchecked" does not make a change. This leads to me having to adjust the CSS style of the switch to turn it e.g. OFF.

However, this leads to the problem now. When I change the CSS using javascript, I basically add styles to the element directly. This leads to the normal toggle switch CSS not working anymore as the element style overrides any class style. If i assign an additional class to the switch , the normal style overrides the class. using !important is not an option, as it stay permanently OFF / ON

Is there any way to apply CSS to an element, without automatically disabling the default CSS style changes? like setting a CSS style until the next normal change happens?

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

.auto-onoffswitch-checkbox:checked + .auto-onoffswitch-label .auto-onoffswitch-switch what is that html? — epascarello
– epascarello, Commented May 30, 2016 at 2:33
Are you adding styles with .css()? If I understand correctly, why not just use .addClass() to add a class? — MeltingDog
– MeltingDog, Commented May 30, 2016 at 2:34
<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> — Drew Peer
– Drew Peer, Commented May 30, 2016 at 2:35
when adding a class !important has to be used, which overlays future changes again — Drew Peer
– Drew Peer, Commented May 30, 2016 at 2:37
you have auto- prepended to your class names in your css styles, but not in your class names in the html, is that an error in typing this question? — Patrick Evans
– Patrick Evans, Commented May 30, 2016 at 2:43

Tom · Accepted Answer · 2016-05-30 20:53:56Z

1

If you cannot change the status of the element using CSS/ normal jquery I would recommend using a click event.

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

Its simple and should do the trick

answered May 30, 2016 at 20:53

Tom

9361 gold badge11 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Drew Peer Over a year ago

Thanks Tom that solved it! Impressive it was that simple.

Collectives™ on Stack Overflow

temporary css changes by javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related