Как изменить свойство класса с помощью js?

#javascript #html #jquery #css

Есть div с классом mystyle. В классе есть свойство margin как его изменить с помощью
обычного js или jquery?



.mystyle, .mystyle ul {
  margin: 0;
}

  

    
Пример
  




    

Ответы

Ответ 1

Если нужно поменять во всех элементах этого класса:

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


Если прямо в стилях нужно поменять:



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

Header


Ответ 2

Обычный JavaScript

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


или так

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


jQuery

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


Ответ 3

Невозможно переписывать CSS стиле с помощью JS. Лучше создай новый класс с нужными
свойствами и добавляй его.

 .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');