Получение значений свойств CSS для HTML-элементов в JavaScript.

В веб-разработке динамическое управление свойствами CSS может улучшить взаимодействие с пользователем и улучшить интерфейс. С помощью JavaScript получить доступ к этим свойствам очень просто.

В вашем сценарии файл CSS связан с HTML-страницей, и вам необходимо получить определенное свойство (например, цвет) для элемента div с именем класса " макет." Вот как этого добиться с помощью JavaScript:

Вариант 1. Анализ таблиц стилей документа (не рекомендуется)

Объяснение:
Этот метод включает в себя перебор документа вручную .styleSheets и анализ его содержимого для поиска нужного свойства. Однако этот подход не рекомендуется, поскольку он может стать громоздким, особенно для сложных файлов CSS или когда вам нужно получить свойства для нескольких элементов.

Вариант 2: эмуляция элемента и использование вычисляемого стиля (предпочтительно)

Объяснение:
Этот метод более эффективен и дает точные результаты. Он включает в себя создание элемента с тем же именем класса, что и у целевого элемента, а затем доступ к вычисленному стилю созданного элемента. Вычисленный стиль представляет собой фактический стиль, примененный к элементу, включая унаследованные стили и любые изменения, внесенные с помощью пользовательских таблиц стилей или JavaScript.

Код JavaScript:

function getStyleProp(elem, prop) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(elem, null).getPropertyValue(prop);
  } else if (elem.currentStyle) {
    return elem.currentStyle[prop]; // IE compatibility
  }
}
window.onload = function () {
  var d = document.createElement("div"); // Create a div element
  d.className = "layout"; // Set the class name
  alert(getStyleProp(d, "color")); // Retrieve the "color" property
};

Аспекты невстроенных стилей

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

Код JavaScript:

function getNonInlineStyle(elem, prop) {
  var style = elem.cssText; // Cache the inline style
  elem.cssText = ""; // Remove inline styles
  var inheritedPropValue = getStyleProp(elem, prop); // Retrieve inherited value
  elem.cssText = style; // Restore inline style
  return inheritedPropValue;
}