Какие способы есть поменять CSS стиль в файле с помощью JavaScript?

Question

[Snatch08]

Всем доброго дня! Подскажите плиз способы поменять CSS не инлайново, а во внешнем файле style.css с помощью JavaScript

Comments

[Snatch08]

Сейчас делаю это так, но способ не быстрый, хотел бы что-то быстрее:

function addRule(Deugunde, Selector, Rule){

  let Styleuge = document.getElementById(Deugunde);

  if(Styleuge){

    Styleuge = Styleuge.sheet;

    if(Styleuge.addRule){

      Styleuge.addRule(Selector, Rule);

    }else if(Styleuge.insertRule){

      Styleuge.insertRule(Selector + ' { ' + Rule + ' }', Styleuge.cssRules.length);
    }
  }
}

window.addEventListener('scroll', Denuqoe, true);

function Denuqoe(e){

  if(window.pageYOffset >= 194){

    let Newnuhug = 'width: auto !important; ' +
                              'margin-right: 2.8rem !important; ' +
                              'opacity: 1 !important; ' +
                              'transition: width 0s ease-in 0s , ' +
                                               'margin-right 0s ease-in 0s, ' +
                                               'opacity .08s ease-in .06s !important; ';

    addRule('DxxStyles', '.Dawanuee > div:nth-of-type(1)', Newnuhug);

  }else{

    let Dewnuhug = 'width: 0 !important; ' +
                              'margin-right: 0 !important; ' +
                              'opacity: 0 !important; ' +
                              'transition: width 0s ease-out 0s,  ' +
                                               'margin-right 0s ease-out 0s, ' +
                                               'opacity .08s ease-out .06s !important; ';

    addRule('DxxStyles', '.Dawanuee > div:nth-of-type(1)', Dewnuhug);
  }
}

[Андрей Федоров]

Snatch08, можете объяснить зачем это нужно?

[Snatch08]

Андрей Федоров, Планирую в будущем перейти в React, Angular или Node.js, там вроде как нельзя менять стиль инлайново, поэтому заранее ищу способы менять стиль во внешнем файле. Может я что-то неправильно понимаю и не так нужно делать?

[Alexandroppolus]

Snatch08, в Node вообще нет никакого цсс. А в Реакте надо менять состояние, а не стили.

[Snatch08]

Alexandroppolus, Аа, Node - это типо серверный и там такого нет, ок, понял. А что значит "в Реакте надо менять состояние, а не стили", это как? Можно ссылку полезную почитать?

P.S. Благодарю всех за помощь, понял, что смысла менять в файле нет и лучше использовать .setAttribute('style', 'display: block; color: gray; '); или .style.cssText = 'display: block; color: gray; ';

Answer 1

[Scoo909010]

Почему бы не использовать css-переменные для свойств, которые изменяются?

.my-element {
  height: var(--element-height);
  width: 40px;
  color: #9b806b;
}

myElement.style.setProperty('--element-height', height + 'px')

Comments

[Snatch08]

Благодарю! Наверное это лучший способ. Элегантное решение, как раз то что искал.. красота!)