获取设置的元素CSS属性（宽度/高度）值（百分比/ em / px / etc）

  • Z时代
  • 2024-01-10
  • 分类：问答

怎样获得用CSS规则设置的元素CSS属性（例如width / height）（以百分比设置）（例如，百分比/ em / px）？（在Google Chrome浏览器中，最好是无框架的）。

using 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在此示例中迭代所有元素时，我希望能够获得第二个divs的宽度50%（和第一个的100px）。

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

Chrome元素检查器显示设置时的属性值

并非所链接问题的精确重复项，因为接受的答案存在一个简单的技巧，无论设置哪种宽度，都会产生百分比宽度。而对于其余部分，您必须知道用于制定活动规则的选择器？怎么会知道呢？

回答：

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

对于我们来说，这真正重要的部分是我们将拥有一个CSSUnitValue API，该API能够将CSS值解析为以下形式的对象：

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

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

截至今天，只有Chrome才实现（自66起）。

(() => {
  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%; }
<div class="b test">first</div>
<div id="a" class="a test">second</div>

以上是 获取设置的元素CSS属性（宽度/高度）值（百分比/ em / px / etc） 的全部内容， 来源链接： utcz.com/qa/421985.html

回到顶部