Извлечение свойств CSS с помощью JavaScript
Навигация по таблицам стилей, прикрепленным к HTML-документу, может дать ценную информацию о представлении элементов страницы. В частности, возможность чтения определенных свойств CSS может помочь в динамическом манипулировании стилями.
Один подход включает ручную проверку объекта document.styleSheets и анализ правил стиля. Однако этот метод трудоемкий и может стать громоздким, особенно при выборе определенных селекторов.
Более прямой метод — создать временный элемент, соответствующий желаемому селектору. Используя методы getComputedStyle() (для современных браузеров) или currentStyle (для Internet Explorer), вы можете получить вычисленное значение любого свойства CSS для созданного элемента.
Например, рассмотрите следующий код для получения свойство цвета
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 элементов, манипулировать их представлением и глубже понимать стиль страницы.
Отказ от ответственности: Все предоставленные ресурсы частично взяты из Интернета. В случае нарушения ваших авторских прав или других прав и интересов, пожалуйста, объясните подробные причины и предоставьте доказательства авторских прав или прав и интересов, а затем отправьте их по электронной почте: [email protected]. Мы сделаем это за вас как можно скорее.
Copyright© 2022 湘ICP备2022001581号-3