如何使用 JavaScript 检索网页元素的 CSS 属性？

使用 JavaScript 检索网页元素的 CSS 属性

当 CSS 文件链接到网页时，JavaScript 开发人员可能会遇到需要读取元素的特定 CSS 属性的情况。

在这种情况下，网页包含

元素具有类名“layout”，开发人员需要一个解决方案来使用 JavaScript 检索该元素的特定属性。虽然有多种方法可用，但两个值得推荐的选项包括：

选项 1：创建和修改元素

1. 创建与感兴趣的元素具有相同属性的元素（例如，
2. ;div> ，类名为“layout”）。

<code class="javascript">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");
    d.className = "layout";
    alert(getStyleProp(d, "color"));
}</code>

使用 getCompulatedStyle 方法检索计算的属性值。此方法提供应用所有相关 CSS 规则后生成的样式。

1. 选项 2：手动解析 Document.styleSheets 对象
2. 访问 document.styleSheets 对象，其中包含链接到文档的所有样式表的数组。

在每个样式表上使用 getPropertyValue() 方法来检索与所需选择器关联的特定属性值。

此除非特别需要收集特定选择器定义的所有 CSS 属性，否则不建议使用该选项。

<code class="javascript">function getNonInlineStyle(elem, prop){
    var style = elem.cssText;
    elem.cssText = "";
    var inheritedPropValue = getStyle(elem, prop);
    elem.cssText = style;
    return inheritedPropValue;
}</code>

此外，要忽略当前元素的内联样式定义，请使用 getNonInlineStyle() 函数：

以上是如何使用 JavaScript 检索网页元素的 CSS 属性？的详细内容。更多信息请关注PHP中文网其他相关文章！