Применение нескольких CSS стилей через JavaScript одной строкой

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

Для одновременного присвоения нескольких CSS-свойств элементу произведите вызов метода Object.assign(), передав в него объект с нужными стилями для element.style:

Object.assign(element.style, {
  backgroundColor: 'blue', // обновляем фон до синего!
  color: 'white', // делаем текст белым!
  border: '1px solid black' // делаем черную границу!
});

Если хотите присвоить стили строкой, используйте свойство cssText:

element.style.cssText = "background-color: blue; color: white; border: 1px solid black;";

Обратите внимание, это перезапишет текущие стили элемента!

Применение стилей через объект параметров

Сформируйте функцию для удобного применения стилей, которая будет принимать элемент и объект со стилями, динамически присваивая их:

function applyStyles(element, styles) {
  Object.assign(element.style, styles); // прямое присвоение стилей
}

applyStyles(someElement, { // установка стилей для someElement
  color: 'red', // делаем текст красным
  fontSize: '16px', // увеличиваем размер текста
  marginBottom: '10px' // добавляем отступ снизу
});

С помощью того функционала стилизация элементов становится простой и понятной, подобно примерке в магазине.

Последовательное обновление стилей без перезаписи!

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

const styles = {
  color: 'green', // зеленый не только для салата!
  fontWeight: 'bold' // делаем текст жирным
};

for (const property in styles) {
  element.style[property] = styles[property]; // обновляем каждый стиль поотдельности
}

Такой подход позволит сохранить стили, которые вы не хотите менять.

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

Процесс добавления CSS-стилей через JavaScript, можно описать как пополнение гардероба новыми вещами:

Шкаф (📄): [Пусто]

Добавляем стиль:

element.style.color = 'blue'; // 🔵 Синяя футболка
element.style.fontSize = '20px'; // 👖 Удобные брюки
element.style.border = '1px solid black'; // ⌚️ Стильные часы

Полный комплект:

📄👔👖👞: [🔵 Синяя футболка, 👖 Удобные брюки, ⌚️ Стильные часы]

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

Повышение удобочитаемости cssText с использованием шаблонных строк

Для обеспечения удобного чтения и отказа от конкатенации примените cssText и шаблонные строки:

element.style.cssText = `
  background-color: ${backgroundColor};
  color: ${textColor};
  border: ${borderWidth} solid ${borderColor};
`;

Этот подход удобен, когда значения CSS хранятся в переменных и необходимо гибко внедрить их в стили.

Предотвращение перезаписи стилей

Спользуясь cssText, убедитесь, что вы добавляете, а не заменяете уже заданные стили:

const existingStyles = element.style.cssText;
element.style.cssText = `${existingStyles}; font-size: 18px;`; // Существующие стили сохранены!

Таким образом, вы оставите исходные стили элемента нетронутыми.

Рациональный выбор элементов

Для выбора DOM-элементов для их стилизации лучше всего используйте методы querySelector и querySelectorAll:

document.querySelector('.my-class').style.cssText += 'display: flex;'; // элементы с классом .my-class становятся гибко расположенными!

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

Высокая производительность и эффективность использования ресурсов!

Чтобы избежать повторного визуализации и потери быстродействия в DOM, усилийте эффективность, объединяя обновления стилей. Вместо того, чтобы устанавливать каждое свойство в отдельности, применяйте cssText, Object.assign, или объект параметров для одновременной установки нескольких стилей.

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

1. HTMLElement: style property – Web APIs | MDN – Статья о том, как можно использовать свойство style для установки CSS-стилей через JavaScript.
2. JavaScript DOM CSS | W3Schools – Учебные материалы о том, как изменять CSS с помощью JavaScript через HTML DOM.
3. How can I set multiple CSS styles in JavaScript? – Stack Overflow – Примеры и обсуждения на тему установки множества CSS-стилей.
4. CSSStyleDeclaration – Web APIs | MDN – Информация о работе с CSS-свойствами через CSSStyleDeclaration API.
5. Add Rules to Stylesheets with JavaScript | David Walsh Blog – Техники динамического изменения стилей с использованием JavaScript.
6. Styles and classes | JavaScript.info – Руководство по изменению стилей с помощью JavaScript.