获取设置的元素 CSS 属性(宽度/高度)值(百分比/em/px/等) [英] Get element CSS property (width/height) value as it was set (in percent/em/px/etc)

问题描述

如何获得元素 CSS 属性(例如宽度/高度)，因为它是用 CSS 规则设置的，无论它设置的是什么单位(例如百分比/em/px)?(在 Google Chrome 中，最好是无框架的).

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

例如:

first
<div id="a" class="a">second</div><风格>div { 宽度:100px;}x, div#a { 宽度:50%;}.a { 宽度:75%；}</风格>

在此示例中迭代所有 div 元素时，我希望能够将第二个 div 的宽度设为 50%(第一个为 100px).

<小时>

Chrome 元素检查器可以显示设置的 CSS 属性值，因此在 Chrome 中应该可以.

<小时>

不是链接问题的完全重复，因为在那里接受的答案有一个简单的技巧，无论设置什么样的宽度，都会产生一个百分比宽度.至于其余的，您必须知道用于制定活动规则的选择器吗?怎么会知道呢?

解决方案

大家好消息！似乎有一个 CSS Typed OM 在他的路上w3c 草稿.

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

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

<代码>{值:100，单位:百分比"，//|像素"|嗯"……类型:百分比"//|长度"}

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

截至今天，只有 Chrome 实现了它(自 66 起).

(() => {if (!Element.prototype.computedStyleMap) {console.error("您的浏览器不支持 CSS Typed OM");返回;}document.querySelectorAll('.test').forEach((elem) => {让 styleMap = elem.computedStyleMap();const unitvalue = styleMap.get('width');控制台日志(元素，{类型:unitvalue.type(),单位:unitvalue.unit，值:unitvalue.value});});/* 输出<div class="b test">first</div>{类型": {长度":1},单位":像素"，价值":100}<div id="a" class="a test">second</div>{类型": {百分比":1},单位":百分比"，价值":50}*/})();

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

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

How could one get an elements CSS property (for example width/height) as it was set with CSS rules, in whatever units it was set (eg percent/em/px)? (In Google Chrome, preferably frameworkless).

Using getComputedStyle returns the current value in pixels, so does css() in jQuery.

For example:

<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>

While iterating all div elements in this example, I'd like to be able to get the second divs width as 50% (and the first as 100px).

---

Chrome element inspector can display CSS property value as they were set, so it should be possible in Chrome.

---

Not an exact duplicate of the linked question, as there the accepted answer there is a simple hack that produces a percentage width no matter what kind of width is set. And for the rest you have to know the selector used to make the active rule? How would one know that?

解决方案

Good news everyone! There seems to be a CSS Typed OM on his way in the w3c drafts.

Fast reading this document, it seems that the goal of this maybe to-be specification, is to ease the access of CSSOM values from javascript.

The really important part of this for us here is that we will have a CSSUnitValue API, which will be able to parse CSS values to an object of the form

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

And add a computedStyleMap() method, to the Element interface, from which we will be able to get the values actually applied on our elements.

As of today, only Chrome implements it (since 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/等)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！