小编典典

使用JavaScript读取元素的CSS属性

css

因此,如果有一个链接到网页的css文件,例如:

<link href="style.css" rel="stylesheet" type="text/css">

并且我想读取某个属性,例如div具有className =’layout’,并且我想使用JavaScript读取此属性的详细信息,我该怎么做?

我搜索了很多,但几乎没有运气,请提出建议。


阅读 296

收藏
2020-05-16

共1个答案

小编典典

您有两种选择:

  1. 手动枚举和解析document.styleSheets对象(不建议使用,除非您要获取由某个选择器定义的所有特定样式属性)。
  2. 创建与选择器匹配的元素,然后使用getComputedStylecurrentStyle(IE)方法获取属性值。

在你的榜样,试图得到一定的属性(比如说:color)有一个div class="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
}

关于您的问题的评论 ,另一个函数:
下面的函数将忽略当前元素的内联样式定义。如果您想知道从样式表继承的样式定义(不包含父元素的继承样式定义),请遍历树并临时擦除.cssText属性,如以下功能所示:

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;
}
2020-05-16