Создание и применение CSS класса в JavaScript динамически

Быстрый ответ

Если вам необходимо срочно создать и применить CSS-класс с помощью JavaScript, следуйте этим шагам:

1. Убедитесь в доступности стилевого файла:

   JS

   Скопировать код

   const styleSheet = document.styleSheets[0];

   Запустить код

2. Добавьте новое правило CSS:

   JS

   Скопировать код

   styleSheet.insertRule(`.dynamic-class { color: red; }`, styleSheet.cssRules.length);

   Запустить код

3. Присвойте элементу новый класс:

   JS

   Скопировать код

   document.getElementById('elementId').classList.add('dynamic-class');

   Запустить код

В итоге класс .dynamic-class с чертами красного цвета нежданно возникнет в главном файле стилей, а идентификатор elementId окрасит текст элемента в красный цвет!

Отсутствует стилевой файл? Нет проблем

Если стилевые файлы не обнаружены, можно создать своеобразный, свой собственный!

if(document.styleSheets.length === 0) {
    let style = document.createElement('style');
    document.head.appendChild(style);
}

С этим подходом появится новый стилевой файл, который с радостью примет ваши CSS-правила.

Создание специализированных CSS-классов по запросу

function createCSSSelector(selector, style) {
  if (!document.styleSheets || document.getElementsByTagName('head').length === 0) return;

  const styleSheet = document.styleSheets[0] || (style => {
    const newStyle = document.createElement('style');
    newStyle.appendChild(document.createTextNode(""));
    document.head.appendChild(newStyle);
    return newStyle.sheet;
  })();

  styleSheet.insertRule(`${selector} { ${style} }`, styleSheet.cssRules.length);
}

createCSSSelector('.dynamic-class', 'color: green;');

Эта функция предоставляет удобный способ для создания CSS-селекторов с заданным стилем. Она также гарантирует наличие доступного стилевого файла для внедрения нового правила.

Визуализация

Сначала создадим правило:

var style = document.createElement('style');
document.head.appendChild(style);
style.sheet.insertRule('.dynamic-class { color: blue; }', 0);

Теперь применим класс к элементу:

document.querySelector('.target-element').classList.add('dynamic-class');

Визуализируем примененные изменения:

До: [👔 (обычный), 👗(обычное)]
После: [👔 (обрел синий цвет), 👗(сияет неподражаемым синим)]

Отлично! Теперь вы знаете технику динамического создания и применения CSS-классов.

Адаптация к динамическим изменениям

window.addEventListener('resize', function() {
  const width = window.innerWidth;
  const dynamicWidthClass = `width-${width}`;

  createCSSSelector(`.${dynamicWidthClass}`, `width: ${width}px;`);
  document.body.classList.add(dynamicWidthClass);
});

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

Обзор библиотек CSS-in-JS

В более сложных или нестандартных приложениях библиотеки типа CSS-in-JS, такие как Emotion или Styled Components, предоставляют продвинутые функции.

import styled from 'styled-components';

const DynamicDiv = styled.div`
  background-color: ${props => props.bgColor};
`;

<DynamicDiv bgColor="papayawhip">Исследуем динамику стилей!</DynamicDiv>

Такие библиотеки позволяют стилю и логике тесно взаимодействовать, предложив мощные инструменты для создания динамических стилей.

Поддержка интерактивных стилей

document.querySelector('.button').addEventListener('mouseover', function(e) {
  createCSSSelector('.button:hover', 'background-color: yellow;');
});

Благодаря динамическому созданию CSS-классов, ваши проекты могут отслеживать и отвечать на действия пользователя, такие как наведение курсора или клик, в реальном времени.

Учет особенностей совместимости

function createAndApplyClass(className, style) {
  if (document.createStyleSheet) {
    document.createStyleSheet().addRule(`.${className}`, style);
  } else {
    const styleSheet = document.styleSheets[0] || document.styleSheets;
    styleSheet.insertRule(`.${className} { ${style} }`, styleSheet.cssRules.length);
  }
}

Эта функция помогает поддерживать совместимость с устаревшими версиями Internet Explorer, включая возможность создания CSS-классов для более старых браузеров.

Динамические темы и многое другое

Возможности JavaScript позволяют нам управлять проектами словно волшебниками, преобразовывая их с помощью динамических тем, интерактивных стилей и адаптивных дизайнов, мгновенно реагирующих на действия пользователей.

Полезные материалы

1. Document: createElement() method – Web APIs | MDN — пошаговое руководство по созданию HTML-элементов с использованием JavaScript.
2. HTMLElement: style property – Web APIs | MDN — погрузитесь в мир напрямую управления стилями элементов с использованием JavaScript.
3. CSSStyleSheet: insertRule() method – Web APIs | MDN — как динамически добавить свои CSS-правила в стилевые файлы через JavaScript.
4. A Complete Guide to Custom Properties | CSS-Tricks — комплексная информация о кастомных CSS-свойствах и динамическом использовании.
5. How To Add a Class Name — подробно разобранные шаги по добавлению классов к элементам от W3Schools.
6. javascript – How to add a class to a given element? – Stack Overflow — обсуждение разнообразных методов добавления классов к элементам на Stack Overflow.
7. GitHub – cssinjs/jss: JSS is an authoring tool for CSS which uses JavaScript as a host language. — глубокое погружение в JSS, инструмент для создания CSS с помощью JavaScript.