How to change class property with js?

If you need to change in all elements of this class:

 $('.mystyle').css('margin','10px') 

If you need to change the styles directly:

 $(function() { var ss = document.styleSheets[0]; var rules = ss.cssRules || ss.rules; var h1Rule = null; for (var i = 0; i < rules.length; i++) { var rule = rules[i]; if (/(^|,) *\.mystyle *(,|$)/i.test(rule.selectorText)) { h1Rule = rule; break; } } h1Rule.style.margin='10px' console.log(h1Rule.style.margin) }); 

 .mystyle{ margin: 0; } 

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

Plain javascript

 document.getElementsByClassName('mystyle')[0].style.margin = "50px"; 

or so

 document.getElementsByClassName('mystyle')[0].style= "margin: 50px"; 

jQuery

 $('.mystyle').css('margin','50px'); 

Cannot rewrite CSS with JS. Better create a new class with the necessary properties and add it.

  .mystyle, .mystyle ul { margin: 0; } .mystyle.active { margin: 20px 0; } .mystyle.active ul { margin: 0 50px; } 

Javascript

  document.querySelector('.mystyle').classList.add('active'); 

jQuery

 $('.mystyle').addClass('active');