DOM – Work with Document.styleSheets and JS Breakpoint Media Query

前言

为了方便管理, 我们会定义 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