Extracting CSS Properties Using JavaScript
Navigating the stylesheets attached to an HTML document can provide valuable insights into the presentation of page elements. In particular, the ability to read specific CSS properties can assist in dynamic style manipulation.
One approach involves manually inspecting the document.styleSheets object and parsing the style rules. However, this method is labor-intensive and can become unwieldy, especially when targeting specific selectors.
A more direct technique is to create a temporary element that matches the desired selector. Using the getComputedStyle() (for modern browsers) or currentStyle (for Internet Explorer) methods, you can retrieve the computed value of any CSS property for the created element.
For instance, consider the following code to retrieve the color property of a
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
};
Alternatively, if you want to determine the CSS property inherited from a stylesheet without considering any inline styles, the following function can be used:
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;
}
By leveraging these techniques, developers can dynamically adjust the CSS properties of elements, manipulate their presentation, and gain a deeper understanding of the page's styling.
Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.
Copyright© 2022 湘ICP备2022001581号-3