«Если рабочий хочет хорошо выполнять свою работу, он должен сначала заточить свои инструменты» — Конфуций, «Аналитики Конфуция. Лу Лингун»
титульная страница > программирование > Как динамически извлечь свойства CSS с помощью JavaScript?

Как динамически извлечь свойства CSS с помощью JavaScript?

Опубликовано 8 ноября 2024 г.
Просматривать:983

How to Extract CSS Properties Dynamically Using JavaScript?

Извлечение свойств CSS с помощью JavaScript

Навигация по таблицам стилей, прикрепленным к HTML-документу, может дать ценную информацию о представлении элементов страницы. В частности, возможность чтения определенных свойств CSS может помочь в динамическом манипулировании стилями.

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

Более прямой метод — создать временный элемент, соответствующий желаемому селектору. Используя методы getComputedStyle() (для современных браузеров) или currentStyle (для Internet Explorer), вы можете получить вычисленное значение любого свойства CSS для созданного элемента.

Например, рассмотрите следующий код для получения свойство цвета

с классом "layout":
function getStyleProp(elem, prop) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(elem, null).getPropertyValue(prop);
  } else if (elem.currentStyle) {
    return elem.currentStyle[prop]; // IE
  }
}
window.onload = function () {
  var d = document.createElement("div"); // Create div
  d.className = "layout"; // Set class = "layout"
  alert(getStyleProp(d, "color")); // Get property value
};

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

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

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

Заявление о выпуске Эта статья перепечатана по адресу: 1729673789. В случае каких-либо нарушений, пожалуйста, свяжитесь с [email protected], чтобы удалить ее.
Последний учебник Более>

Изучайте китайский

Отказ от ответственности: Все предоставленные ресурсы частично взяты из Интернета. В случае нарушения ваших авторских прав или других прав и интересов, пожалуйста, объясните подробные причины и предоставьте доказательства авторских прав или прав и интересов, а затем отправьте их по электронной почте: [email protected]. Мы сделаем это за вас как можно скорее.

Copyright© 2022 湘ICP备2022001581号-3