快速阅读本文档,似乎该规范的目标可能是简化从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>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)