获取设置的元素CSS属性(宽度/高度)值(以百分比/ em/px /等为单位)

Question

如何使用CSS规则设置元素CSS属性(例如宽度/高度),无论以何种单位设置(例如,百分比/ em/px)？(在谷歌浏览器中,最好是无框架的).

使用getComputedStyle以像素为单位返回当前值css(),jQuery中也是如此.

例如:

<div class="b">first</div>
<div id="a" class="a">second</div>

<style>
     div      { width: 100px; }
     x, div#a { width: 50%;   }
     .a       { width: 75%;   }
</style>

在迭代div本例中的所有元素时,我希望能够得到第二个div宽度为50%(和第一个宽度100px).

---

Chrome元素检查器可以在设置时显示CSS属性值,因此应该可以在Chrome中使用.

---

不是链接问题的完全重复,因为在接受的答案中有一个简单的hack,无论设置何种宽度,都会产生百分比宽度.其余的你必须知道用于制定活动规则的选择器吗？怎么会知道的？

Answer 1

它不像只调用WebKits那么简单getMatchedCSSRules(),它确实按优先级顺序返回匹配的规则(虽然我在文档中没有看到这个顺序),但是顺序没有考虑属性的重要优先级而且不包括元素风格.所以我最终得到了这个功能:

getMatchedStyle

function getMatchedStyle(elem, property){
    // element property has highest priority
    var val = elem.style.getPropertyValue(property);

    // if it's important, we are done
    if(elem.style.getPropertyPriority(property))
        return val;

    // get matched rules
    var rules = getMatchedCSSRules(elem);

    // iterate the rules backwards
    // rules are ordered by priority, highest last
    for(var i = rules.length; i --> 0;){
        var r = rules[i];

        var important = r.style.getPropertyPriority(property);

        // if set, only reset if important
        if(val == null || important){
            val = r.style.getPropertyValue(property);

            // done if important
            if(important)
                break;
        }
    }

    return val;
}

例

给出以下代码和样式规则:

<div class="b">div 1</div>
<div id="a" class="a d2">div 2</div>
<div id="b" class="b d3" style="width: 333px;">div 3</div>
<div id="c" class="c d4" style="width: 44em;">div 4</div>

<style>
div      { width: 100px; }
.d3      { width: auto !important; }
div#b    { width: 80%;   }
div#c.c  { width: 444px; }
x, div.a { width: 50%;   }
.a       { width: 75%;   }
</style>

这个JS代码

var d = document.querySelectorAll('div');

for(var i = 0; i < d.length; ++i){
    console.log("div " + (i+1) + ":  " + getMatchedStyle(d[i], 'width'));
}

为divs 提供以下宽度:

div 1:  100px
div 2:  50%
div 3:  auto
div 4:  44em

(在jsFiddle)

Answer 2

大家好消息！在他的 w3c 草案中似乎有一个CSS Typed OM。

快速阅读本文档，似乎这个可能即将成为规范的目标是简化从 javascript 访问 CSSOM 值的过程。

对我们来说真正重要的部分是我们将有一个CSSUnitValue API，它将能够将 CSS 值解析为表单的对象

{
  value: 100,
  unit: "percent", // | "px" | "em" ...
  type: "percent"  // | "length"
}

并computedStyleMap()在 Element 接口中添加一个方法，从中我们将能够获得实际应用于我们元素的值。

截至今天，只有 Chrome 实现了它（从 66 开始）。

{
  value: 100,
  unit: "percent", // | "px" | "em" ...
  type: "percent"  // | "length"
}

(() => {
  if (!Element.prototype.computedStyleMap) {
    console.error("Your browser doesn't support CSS Typed OM");
    return;
  }
  document.querySelectorAll('.test')
    .forEach((elem) => {
      let styleMap = elem.computedStyleMap();
      const unitvalue = styleMap.get('width');
      console.log(elem, {
        type: unitvalue.type(),
        unit: unitvalue.unit,
        value: unitvalue.value
      });
    });

/* outputs

  <div class="b test">first</div> {
    "type": {
      "length": 1
    },
    "unit": "px",
    "value": 100
  }
  
  <div id="a" class="a test">second</div> {
    "type": {
      "percent": 1
    },
    "unit": "percent",
    "value": 50
  }

*/

})();

div.test {  width: 100px; }
x,div#a {  width: 50%; }
.a {  width: 75%; }

Answer 3

显然,没有DOM API

https://developer.mozilla.org/en/DOM/window.getComputedStyle#Notes

编辑:oops,刚刚意识到这是标记为谷歌Chrome

试试window.getMatchedCSSRules()