Работа со стилями при помощи JS

Question

Суть вопроса заключается в следующем: Может я ошибаюсь, но пропись стилей внутри атрибута (style) внутри тега не является хорошей практикой, особенно когда имеется необходимость в добавлении относительно большого количества стилей. Так вот изменение стилей при помощи JS производится "именно таким образом" - стили прописываются внутри тега, это нормально или стоит пользоваться чем то другим для форматирования стилей?

Answer 1

Ты можешь вкинуть(inject), свои стили, так:

(()=>{
    const bg_color = '#232323';
    $('body').append(`<style>
        body{
            background:${bg_color}!important;
        }
    </style>`);
})();

После, изменить bg_color, и нажать inject еще раз

Так же, рекомендую обратить внимание на .css из jquery

Например:

$('input').css({
    background: '#232323',
    color: 'white'
});

Answer 2

Можно в css прописать класс какой-то и создавать блок с определённым классом и вставлять этот блок куда вам нужно

const div = document.createElement('div');
div.classList.add('myclass');
document.body.append(div);

.myclass {
  background-color: red;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  border-radius: 50px;
}

Элементам при клике, наведении или ещё каком либо событии можно просто добавлять/удалять класс .active, пример:

const cards = document.querySelectorAll('.card'); // Получаем все элементы на странице с .card
cards.forEach((elem, i) => { // проходимся по элементам в цикле
  elem.addEventListener('click', () => { // каждому элементу ставим слушатель
    elem.classList.toggle('active'); // при клике на элемент добавлять/удалять класс active
  });
});

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 2vw;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  max-width: 900px;
  margin: 0 auto;
}

:root {
  --time: 0.25s linear;
}

.card__wrapper {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  margin-top: 20px;
}

.card {
  position: relative;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 0 1%;
  transition: background-color var(--time);
  padding: 10px 0;
}

.card::before {
  position: absolute;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: transparent;
  border: 2px solid black;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--time);
}

.card *:not(.card__img) {
  z-index: 2;
}

.card .card__img img {
  z-index: -1;
  transition: filter var(--time);
  padding: 10px;
}


/* Стили, которые применяются для .card с классом .active */

.card.active {
  background-color: yellow;
}

.card.active .card__img img {
  filter: grayscale(1);
}

.card.active::before {
  opacity: 1;
}

<div class="container">
  <div class="card__wrapper">
    <div class="card">
      <div class="card__title">
        Заголовок
      </div>
      <div class="card__description">
        Описание Описание
      </div>
      <div class="card__img">
        <img src="https://picsum.photos/300/250">
      </div>
    </div>
    <div class="card">
      <div class="card__title">
        Заголовок
      </div>
      <div class="card__description">
        Описание Описание
      </div>
      <div class="card__img">
        <img src="https://picsum.photos/300/250">
      </div>
    </div>
    <div class="card">
      <div class="card__title">
        Заголовок
      </div>
      <div class="card__description">
        Описание Описание
      </div>
      <div class="card__img">
        <img src="https://picsum.photos/300/250">
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Работа со стилями при помощи JS

Ответы (2 шт):