标签：DOM Media variables Work JS styleSheets 获取 Document CSS

前言

为了方便管理, 我们会定义 CSS Variables, 类似于全局变量. 有时候做特效的时候还需要 JavaScript 配合,

这时就会希望 JavaScript 可以获取到 CSC Variables, 虽然 JS 可以做到单独获取某个 CSS Variable 但是, 若想获取所有的 CSS Variables 就不那么容易了.

它需要通过 Document.styleSheets 的方式去获取, 这篇就是介绍这个的.

参考

stackoverflow – Get all css root variables in array using javascript and change the values

CSS-Tricks – How to Get All Custom Properties on a Page in JavaScript

介绍

Document.styleSheets 可以获取到页面里所有的 Style CSS information. 类似于 C# 的反射, 让你可以遍历所以的 Style.

这篇我们就是要通过这个功能, 获取到想要的 CSS Variables. 当然不管你想获取什么 Style 都是可以通过这个方式的, 自己遍历, 自己过滤就是了.

案子

我这次是想实现一个 JS 的 breakpoint media query. 通过 Scss/CSS variables 来做管理. 过程是 Scss 定义 variables 遍历写入到 CSS variables

JS 通过 Document.styleSheets 遍历出 breakpoint CSS variables. 然后配合 Window.matchMedia 做 media query.

标签：DOM,Media,variables,Work,JS,styleSheets,获取,Document,CSS
来源： https://www.cnblogs.com/keatkeat/p/16338324.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。