使用新的CSS类型对象模型
程序员文章站
2022-07-09 17:56:47
https://developers.google.com/web/updates/2018/03/cssom https://blog.chromium.org/2018/03/chrome-66-beta-css-typed-object-model.html ......
el.attributeStyleMap.set('padding', CSS.px(42)); const padding = el.attributeStyleMap.get('padding'); console.log(padding.value, padding.unit); // 42, 'px'
// Element styles. el.attributeStyleMap.set('opacity', 0.3); typeof el.attributeStyleMap.get('opacity').value === 'number' // Yay, a number! // Stylesheet rules. const stylesheet = document.styleSheets[0]; stylesheet.cssRules[0].styleMap.set('background', 'blue');
// All 3 of these are equivalent: el.attributeStyleMap.set('opacity', 0.3); el.attributeStyleMap.set('opacity', '0.3'); el.attributeStyleMap.set('opacity', CSS.number(0.3)); // see next section // el.attributeStyleMap.get('opacity').value === 0.3 // StylePropertyMaps are iterable. for (const [prop, val] of el.attributeStyleMap) { console.log(prop, val.value); } // → opacity, 0.3 el.attributeStyleMap.has('opacity') // true el.attributeStyleMap.delete('opacity') // remove opacity. el.attributeStyleMap.clear(); // remove all styles.
if (window.CSS && CSS.number) { // Supports CSS Typed OM. }
上一篇: 使用echart 做出数据折线图
推荐阅读
-
CSS3中几个新增加的盒模型属性使用教程
-
如何方便的结果ajax使用html5的新type类型
-
【转载】C#使用typeof运算符获取对象变量的具体类型Type
-
自己使用的css3新特性
-
C#基础(204)--对象初始化器,基本数据类型与引用数据类型特点总结,ref,out关键字的使用
-
使用新的CSS类型对象模型
-
简述systemd的新特性及unit常见类型分析、使用systemd管理编译安装的nginx
-
java基础(14):Eclipse、面向对象、自定义数据类型的使用
-
使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式
-
PHP 进阶篇:面向对象的设计原则,自动加载类,类型提示,traits,命名空间,spl的使用,反射的使用,php常用设计模式 (麦子学员 第三阶段)