css js修改css变量

2026-04-19 19:15:09 1753阅读 0评论

如何在CSS中动态修改样式并获取JavaScript中的CSS变量

随着前端技术的发展和Web设计需求的变化，在网页开发过程中，我们常常需要根据用户的交互行为或者特定条件来调整页面元素的外观属性。比如响应式的布局变化、颜色方案切换等。

一、背景介绍及问题提出：

目前主流浏览器已经支持了@supports()规则以及自定义元标记(<style>标签)下的全局 CSS 变量功能 (--variable-name) 。这些特性使得我们在编写代码时可以更加灵活地控制样式的应用方式, 而且也方便后续通过 JavaScript 动态改变其值从而实现更复杂的界面效果。

然而有时候我们需要将某些复杂计算结果存储到某个预设好的类名里供其他地方引用；又或者是想把一些公共配置项提取出来集中管理起来以便于维护等等情况发生——这时就需要借助 JS 来操作 DOM 或者是利用 document.documentElement.style.setProperty('property', value) 这种方法去设置/查询相关属性值啦！

二、解决方案

方法一: 使用JS 获取当前文档根节点上的所有CSS变量及其对应的数值:

function getGlobalVariables() {
    const variables = {};

    // 遍历所有的 <style> 元素查找其中声明的所有 --* 前缀的标识符 
    document.querySelectorAll("style").forEach(style => {        
        style.sheet.cssRules.forEach(rule => {
            if (rule.type === RULE_TYPE.STYLE_RULE && rule.selectorText.startsWith(":root")) {
                for(const [key,value] of Object.entries((new Map()).entries()) ) {
                    let propKey;

                    try{
                        propKey= key.replace(/-/g,'').toLowerCase();

                        var cssValue = window.getComputedStyle(document.body).getPropertyValue(propKey);
                        console.log(`${propKey}: ${cssValue}`);
                    }catch(e){
                        continue;   
                    }

                    variables[propKey]=value;
                };
            };            
        });
    });

   return JSON.stringify(variables);     
}

上述函数会遍历整个DOM树找到所有 <style> 标签下所包含的内容然后从中筛选出那些属于:root选择器范围内的前导符号为“-”(即表示该条目是一个CSS变量）并且将其转换成小写字母后作为键存入对象数组内返回给调用方即可完成目标任务！

方法二 : 在HTML文件头部插入一段用于存放共享资源块的数据结构(JSON格式):

<script>
const sharedResources={
    "colorPrimary":"red",
    "fontFamily": "'Arial','sans-serif'"
};
</script>

<style id="shared-resources">
/* 将上面JSON数据解析后的字符串赋值给此ID */
@media screen and (-webkit-min-device-pixel-ratio:.0){ /* 确保只加载一次 */ 
    @import url(data:text/css;base64,"${btoa(sharedResources)}");
}</style>

这样做的好处在于我们可以轻松访问这个由服务器端生成出来的静态片段而无需担心它被多次请求导致性能下降的问题同时也能确保每次刷新都能拿到最新版本的信息哦~

另外如果想要更新这部分内容只需要重新发送HTTP GET 请求就可以达到目的而不是像之前那样得手动编辑源码然后再部署上线那么麻烦得多不是吗？