获取设置的元素CSS属性(宽度高度)值(百分比 empxetc)

获取设置的元素CSS属性(宽度高度)值(百分比 empxetc),第1张

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

快速阅读本文档,似乎该规范的目标可能是简化从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      });    });})();div.test {  width: 100px; }x,div#a {  width: 50%; }.a {  width: 75%; }<div >first</div><div id="a" >second</div>


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/5559543.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-12-14
下一篇 2022-12-14

发表评论

登录后才能评论

评论列表(0条)

保存