Как добавить в js стили классам как в css?

Question

Speakermen @Speakermen

JavaScript

Как добавить в js стили классам как в css?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="block">text</div>
    <div class="block">text</div>
    <div class="inline-block">text</div>
    <div class="inline-block">text</div>
    <script src="./less1.js"></script>
  </body>
</html>

.block {display: block;}
.inline-block {display: inline-block;}

Можно как-то проще добавить стили к классам?

((el) => {
  el.forEach((el) => {
    const select = document.getElementsByClassName(el);

    if (select.length !== 0) {
      document
        .querySelectorAll("." + el)
        .forEach((element) => (element.style.display = el));
    }
  });
})([
  "block",
  "inline-block",
  "inline",
  "flex",
  "inline-flex",
  "table",
  "inline-table",
  "table-caption",
]);

Вопрос задан более двух лет назад
563 просмотра

8 комментариев

Подписаться 1 Простой 8 комментариев

tempick @tempick

Как же хорошо, когда все хейтят jquery, а ты просто пишешь $('.block').css('display', 'block') и радуешься жизни

Написано более двух лет назад
imko @imko

tempick, и правда радостно жить не понимая в чем состоит вопрос и особенно то что одно свойство в стиле поменять без этого динозвара та же самая одна строка. Большой ум- большое горе, да?)

Написано более двух лет назад

Speakermen @Speakermen Автор вопроса

tempick, типа

const frame = {
  _propertyValue: "",
  $: function (propertyValue) {
    this._propertyValue = document.querySelectorAll(propertyValue);
    return this;
  },
  css: function (property, propertyValue) {
    switch (property) {
      case "display":
        this._propertyValue.forEach((property) =>
          console.log((property.style.display = propertyValue))
        );
        break;
    }
  },
};

frame.$(".block").css("display", "block");
frame.$(".inline-block").css("display", "inline-block");

Написано более двух лет назад

tempick @tempick
imko, имеете в виду что-то вроде
document.querySelectorAll('.block').forEach((item)=> item.style.display = 'block')
? Если да - то, конечно - всего одна строка. Можно и весь скрипт написать в одну строку. Только читабельность будет хуже
Написано более двух лет назад
imko @imko

tempick, наборот тут как раз все написано прямо и ясно, поэтому легко читается. $('.block').css('display', 'block') надо помнить каждый оператор, .css что делает например, пишет или читает? Атрибут style или computedStyle или "сырой" стиль? Где здесь указано "для кадого элемента" ?

Написано более двух лет назад
imko @imko

tempick, про плагины вообще молчу

Написано более двух лет назад
tempick @tempick

imko,
.css что делает например, пишет или читает?

Вроде вполне очевидно что в данной ситуации он именно пишет. Да, когда передается только один аргумент (.css('display')) - тут может возникнуть у кого-то вопрос.

Атрибут style или computedStyle или "сырой" стиль? Где здесь указано "для каждого элемента" ?
Достаточно один раз посмотреть в доке, и это запомнится на долгое время. Одно дело, если бы у jquery были десятки конкурентов, и в разных проектах каждый бы использовал свою либу со своим уникальным синтаксисом - то да, писать на ваниле было бы реально выигрышнее. Но такой проблемы нет: незнакомый метод? - глянул в доку - надолго запомнил и спокойно живешь дальше. А если забыл - ещё раз глянул в доку - снова запомнил надолго.

Поймите, я совершенно не против ванильного js и тем более js-фреймворков. И, хоть я больше backend-разработчик, относительно часто работаю с фронтендом на vue+quasar (а для mini apps в вк еще и реакт). Но часто надо просто набросать довольно простую логику на фронте (например, админка парсера/бота), и jquery просто экономит время и символы, при этом он максимально простой как молоток.

Про плагины к jquery ничего не могу сказать, никогда не работал с ними

Написано более двух лет назад
imko @imko

tempick, я за то чтобы за меня помнила машина, а я писал код, просто и понятно. А плагины мое любимое) Просто отрабатывают во время загрузки и дописываются в прототип (не помню точно) всего jquery, обращение к ним потом пальцем в небо, вспоминай название, вспоминай как используется, надейся что он дописался и может быть вызван.

Написано более двух лет назад

Решения вопроса 2

2 комментария

Speakermen @Speakermen Автор вопроса

Cпасибо огромное

((propertyValues) => {
  propertyValues.forEach((propertyValue) => {
    Array.prototype.forEach.call(
      document.getElementsByClassName(propertyValue),
      ({ style }) => {
        style.display = propertyValue;
      }
    );
  });
})([
  "block",
  "inline-block",
  "inline",
  "flex",
  "inline-flex",
  "table",
  "inline-table",
  "table-caption",
]);

const frame = {
  _propertyValue: "",
  $: function (propertyValue) {
    this._propertyValue = document.querySelectorAll(propertyValue);
    return this;
  },
  css: function (property, propertyValue) {
    switch (property) {
      case "display":
        this._propertyValue.forEach((property) =>
          (property.style.display = propertyValue)
        );
        break;
    }
  },
};

frame.$(".block").css("display", "block");
frame.$(".inline-block").css("display", "inline-block");
frame.$(".inline").css("display", "inline");
frame.$(".flex").css("display", "flex");

Теперь более понятно, как эта штука работает)

<script src="https://cdn.tailwindcss.com"></script>

Написано более двух лет назад

Speakermen @Speakermen Автор вопроса

const css = document.createElement("style");

const thema = {
  display: [
    {
      class: "block",
      properties: "display: block;",
    },
    {
      class: "inline-block",
      properties: "display: inline-block;",
    },
  ],
  extend: {},
};

thema.display.map((k) => (css.innerText += `.${k.class} {${k.properties}}`));

document.head.appendChild(css);

Написано более двух лет назад

2 комментария

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 5 часов назад
- 52 просмотра
1

ответ
JavaScript

+4 ещё

Сложный
Почему в WebSockets History в Burp Suite отображаются кракозябры?
- 1 подписчик
- вчера
- 73 просмотра
2

ответа
JavaScript

Простой
Как выводить JS код?
- 2 подписчика
- вчера
- 497 просмотров
2

ответа
JavaScript

Простой
Как заставить срабатывать trigger change в Select2?
- 1 подписчик
- вчера
- 47 просмотров
0

ответов
JavaScript

Простой
Почему появляется ошибка Uncaught Reference?
- 1 подписчик
- 20 дек.
- 81 просмотр
2

ответа
JavaScript

Средний
Порождается ли событие в элементе или оно само по себе?
- 1 подписчик
- 20 дек.
- 94 просмотра
1

ответ
JavaScript

+2 ещё

Средний
Как можно изменить настройки модуля навигации карт Google на Яндекс карты?
- 2 подписчика
- 19 дек.
- 201 просмотр
2

ответа
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 97 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как загрузить img в первой очереди при загрузке страницы?
- 1 подписчик
- 19 дек.
- 85 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Какие есть высокоуровневые компонентные javascript фреймворки?
- 1 подписчик
- 19 дек.
- 163 просмотра
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Парсинг товаров с интернет-магазина

22 дек. 2024, в 19:47

3000 руб./за проект

Разработать дизайн приложений

22 дек. 2024, в 19:03

60000 руб./за проект

Веб-дизайн клининговой компании

22 дек. 2024, в 17:54

10000 руб./за проект

Как же хорошо, когда все хейтят jquery, а ты просто пишешь $('.block').css('display', 'block') и радуешься жизни
tempick, и правда радостно жить не понимая в чем состоит вопрос и особенно то что одно свойство в стиле поменять без этого динозвара та же самая одна строка. Большой ум- большое горе, да?)
tempick, типа

const frame = { _propertyValue: "", $: function (propertyValue) { this._propertyValue = document.querySelectorAll(propertyValue); return this; }, css: function (property, propertyValue) { switch (property) { case "display": this._propertyValue.forEach((property) => console.log((property.style.display = propertyValue)) ); break; } }, }; frame.$(".block").css("display", "block"); frame.$(".inline-block").css("display", "inline-block");
imko, имеете в виду что-то вроде
document.querySelectorAll('.block').forEach((item)=> item.style.display = 'block')
? Если да - то, конечно - всего одна строка. Можно и весь скрипт написать в одну строку. Только читабельность будет хуже
tempick, наборот тут как раз все написано прямо и ясно, поэтому легко читается. $('.block').css('display', 'block') надо помнить каждый оператор, .css что делает например, пишет или читает? Атрибут style или computedStyle или "сырой" стиль? Где здесь указано "для кадого элемента" ?
tempick, я за то чтобы за меня помнила машина, а я писал код, просто и понятно. А плагины мое любимое) Просто отрабатывают во время загрузки и дописываются в прототип (не помню точно) всего jquery, обращение к ним потом пальцем в небо, вспоминай название, вспоминай как используется, надейся что он дописался и может быть вызван.

Answer 1 · 2022-11-20 21:54:07

Переписать то же, короче, можно примерно так:

(names =>
  names.forEach(name => {
    document.getElementsByClassName(name).forEach(({ style }) => {
      style.display = name;
    });
  }))(['block', 'inline-block', 'inline', 'flex', 'inline-flex', 'table', 'inline-table', 'table-caption']);

Или можно «просто взять, и ..» добавить в head документа сгенерированный CSS:

Answer 2 · 2022-11-20 21:59:25

Можно не пробегать по DOM дереву, подставляя inline стили элементам. А модифицировать сами CSS правила в итоговом style всей страницы. См. Adding and Removing Rules.

Answer 3 · 2022-11-21 10:08:48

У меня два способа. Либо добавлять класс DOM элементу с помощью название_элемента.classList.add/remove/toggle
Либо напрямую писать название_элемента.style.color = "green"

Как добавить в js стили классам как в css?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт