如何在 JavaScript 中检索元素的 CSS 属性值？

使用 JavaScript 读取元素的 CSS 属性

问题：

如何获取值使用 JavaScript 的元素的 CSS 属性，考虑到样式表从外部链接到网页？

解决方案：

主要有两种方法：

1。使用 document.styleSheets:

此方法涉及手动迭代 document.styleSheets 数组并解析 CSS 规则以查找所需的属性。但是，不建议使用这种方法，因为它会占用大量资源，并且对于大多数场景来说并不实用。

2.创建匹配元素并使用 getComputedStyle：

此方法创建一个与目标元素具有相同 CSS 选择器的元素，并使用 getComputedStyle 方法检索属性值。这种方法的优点是它考虑了所有继承的样式和动态应用的任何样式。

代码示例：

检索 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
}</code>

用法：

<code class="javascript">window.onload = function(){
    var d = document.createElement("div"); //Create div
    d.className = "layout";                //Set class = "layout"
    alert(getStyleProp(d, "color"));       //Get property value
}</code>

附加说明：

忽略内联当前元素上的样式定义，使用 getNonInlineStyle 函数：

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

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