自定义项目颜色：css自定义变量

最新推荐文章于 2021-10-24 21:05:02 发布

张张的技术贴

最新推荐文章于 2021-10-24 21:05:02 发布

阅读量806

点赞数

CC 4.0 BY-SA版权

分类专栏： js css 文章标签： css jquery

原文链接：https://blog.csdn.net/qq_39207948/article/details/84780767

js 同时被 2 个专栏收录

50 篇文章

订阅专栏

css

32 篇文章

订阅专栏

本文详细介绍了如何在CSS中定义和使用变量，包括通过jQuery和JavaScript动态修改及读取这些变量的方法，为网页背景颜色等样式提供了灵活的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义变量：
:root {
   --frame-color: red;
}

使用变量：
html {
   background-color: var(--frame-color);
}

jquery:
修改变量：
document.body.style.setProperty('--frame-color', 'yellow');
读取变量：
document.body.style.getPropertyValue('--frame-color').trim();
删除变量：
document.body.style.removeProperty('--frame-color');

JavaScript:
修改变量：(在JavaScript中，document.documentElement，代表文档根元素)
document.documentElement.style.setProperty('--frame-color', 'yellow');