Получение стилей HTML-элемента через тег style в JavaScript

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

В JavaScript вы можете воспользоваться функцией getComputedStyle() для получения вычисленных стилей на конкретном элементе. Для того чтобы извлечь определённое свойство стиля, такое как color, у элемента с идентификатором #elementID, используйте эту конструкцию:

var color = getComputedStyle(document.getElementById('elementID')).color;

Вы получите фактическое значение цвета, применяемое к данному элементу.

Не забывайте о кроссбраузерной совместимости. Помимо большинства браузеров, функция getComputedStyle() поддерживается и в Internet Explorer. Однако для этого браузера будет лучше использовать метод element.currentStyle. Вот пример функции, позволяющей избежать проблем совместимости:

function getStyle(element, property) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(element).getPropertyValue(property);
  } else { // Guess who's back, back again, IE's back, tell a friend.
    return element.currentStyle[property];
  }
}

Нейтрализация несовместимостей между браузерами

Множество проблем с несовместимостью возникает при работе с браузером Internet Explorer – от различий в наименовании свойств до отличий в возвращаемых единицах измерения и значениях цветов.

Например, свойство CSS float в JavaScript обозначается как cssFloat, в то время как в IE оно называется styleFloat. Поэтому, осуществляйте корректировки для обеспечения совместимости.

Internet Explorer предпочитает отдавать исходные единицы измерения (например, em или %), в отличие от других браузеров, которые преобразуют их в пиксели.

Примите к сведению, что отображение цветов также может отличаться: стандартные браузеры обычно возвращают значения в RGB или шестнадцатеричном формате, в то время как IE может представлять цвета по их названиям.

Уменьшение зависимости от библиотек

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

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

Для наглядности рассмотрите процесс извлечения стилей элемента в JavaScript в виде аналогии с 🚪 шкафом, полным разных нарядов (стилей).

Извлечение стиля:

const element = document.getElementById('yourElement');
const style = window.getComputedStyle(element);

Теперь все стили (наряды) доступны вам.

Представим, что вы выбираете конкретный наряд:

• Цвет рубашки: style.getPropertyValue('color') 👔
• Размер штанов: style.getPropertyValue('font-size') 👖

Вот и всё! Вы выбрали нужный наряд! 🌟

Контроль над вашим гардеробом: системность и эффективность

Управление переполненным шкафом

Когда приходится работать с большим количеством свойств, можно использовать метод reduce для сбора значений в одном объекте, вместо того чтобы вызывать getPropertyValue для каждого свойства:

const styles = window.getComputedStyle(element);
const neededProps = ['marginTop', 'backgroundColor', 'flexGrow'];
const styleObject = neededProps.reduce((obj, prop) => {
  obj[prop] = styles.getPropertyValue(prop); // ТЕПЕРЬ ЭТО МОЁ.
  return obj;
}, {});

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

Подробнее об этом расскажет наш спикер на видео

Достижение единообразия

Для обеспечения устойчивости и стабильности рекомендуется использовать единицы измерения в одной и той же форме во всех браузерах. В случае если вам требуются значения в пикселях, в IE их возможно придётся конвертировать вручную.

Также при работе с цветами старайтесь придерживаться определённых стандартов. Предпочтите форматы hex или rgb, где это возможно.

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

1. Window: getComputedStyle() method – Web APIs | MDN – Изучите, как извлекать все стили элемента.
2. HTML DOM Style object – Основной ресурс, где собрана необходимая информация по изменению стилей элемента с помощью JavaScript.
3. Updating a CSS Variable with JavaScript | CSS-Tricks – CSS-Tricks – Практическое пособие по управлению CSS переменными при помощи JavaScript.
4. Styles and classes – Обучающий материал по работе со стилями и классами в JavaScript — от начального до продвинутого уровня.
5. Using CSS custom properties (variables) – CSS: Cascading Style Sheets | MDN – Узнайте про возможности и гибкость, которые предоставляют CSS переменные в дизайне.