1.自定义变量

不使用less,scss等预编译处理器时，原生css也可以自定义变量。
自定义的css变量有一定的命名规则，变量名前需要是两个“破折号”，然后为其赋值。
比如 --day-color:white;

注意：万恶的IE浏览器不支持CSS原生变量定义。

2.使用自定义变量

在css属性后使用 var(变量名) 即可。

background-color:var(--day-color)；

加入回退值，在变量值不生效的时候会使用该值

background-color:var(--day-color,white)；

3. :root

:root 选择器匹配文档根元素。

注意：在 HTML 中，根元素始终是 html 元素。

一般在:root里写入自定义变量，这样整个页面就都可以使用该变量了

4.白天黑夜切换示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS自定义变量</title><style>:root{--day-color:#f1f2f6;--night-color:black;}div.bg{width: 500px;height: 500px;margin:auto;background-color: var(--day-color,white);border:2px solid #eee;}button.change{width: 50px;height: 50px;margin:auto;display: flex;justify-content: center;align-items: center;margin-top: 5px;color:blue;}</style>
</head>
<body><div class="bg"></div><button class="change">变化</button><script>let btn = document.querySelector('button');btn.onclick = function(){//读取根样式const rootStyles = getComputedStyle(document.documentElement);//读取颜色值const bgColor = rootStyles.getPropertyValue('--day-color');console.log(bgColor)// 变换颜色值if(bgColor==="#f1f2f6"){document.documentElement.style.setProperty('--day-color','var(--night-color)')}else{document.documentElement.style.setProperty('--day-color','#f1f2f6')}}</script>
</body>
</html>

CSS自定义变量，白天变黑夜示例相关推荐

[css] 如何在白天和黑夜自动切换页面的颜色？
[css] 如何在白天和黑夜自动切换页面的颜色? 媒体查询的内容都是设备的属性:宽度高度,旋转方向,打印样式,分辨率所以用媒体查询的话,需要用户的设备拥有切换黑暗模式的功能借助 js 切换页面颜色 ...
vue css自定义标签,Vue如何使用CSS自定义变量
目录在 css 自定义变量的功能以及出来许久了,但实际开发中大家使用并不多.归其原因是因为 less.sass 等预处理器已经拥有定义变量的功能,以及Vue.react很方便设置 style 样式, ...
[CSS] 自定义变量带你随心所欲，一键换肤
认识CSS自定义变量 CSS自定义属性?听着怎么那么神奇呢,属性还可以自定义,那不是可以放肆地玩耍?我自己定义的属性浏览器都能认识? 一.基础 (一)名字和用途其实CSS自定义属性还有很多小名,比如 ...
css的属性是变量是怎么表达,CSS自定义变量属性——像less，sass那样在css中使用变量（译）...
初步使用 :root { --main-color: #06c; --accent-color: #006; } /* The rest of the CSS file */ #foo h1 { // ...
CSS-颜色属性+颜色函数+自定义变量
最近更新时间:2017年5月8日16:08:13 <我的博客地图> 离开校园踏入职场,不是到达人生巅峰,而是人生才刚刚开始.校园里学的知识远不足工作需求,而且校园里的学习深度也比较浅显.因 ...
vue css 应用变量_如何使用CSS Grid和CSS变量快速为应用创建原型
vue css 应用变量 CSS Grid and CSS Variables are both huge wins for front-end developers. The former make ...
css 识别变量中的换行符_跟我一起全面了解一下CSS变量
什么是css变量? CSS变量,即CSS variable.官方的名称是级联变量的CSS自定义属性,即CSS custom properties for cascading variables.类似于 ...
css自定义字体转换工具_5种最佳CSS3字体工具
css自定义字体转换工具自从将图形支持添加到浏览器以来,字体在网络上产生了最戏剧性的视觉影响. 几年前,不可能找到使用Arial,Verdana,Tahoma,Times New Roman或Geo ...
自定义变量配置文件_「系统架构」Nginx调优之变量的使用（3）
在上一篇文章「系统架构」Nginx调优之变量的使用(2)中我们介绍了自定义变量和内置变量,下面我们继续接着介绍Nginx中变量的可见性和动态内置变量. 变量的可见性 nginx中的变量虽然不全是全局变 ...
dedecms前端无法调用自定义变量怎么解决
网友问ytkah说他的dedecms前端无法调用自定义变量要怎么解决,登录他的网站后台看了一下,自定义变量已经添加了,也写入了数据库表中,但是就是前台没办法调用出来,后面想想可能是文件权限不够,具体是 ...

CSS自定义变量，白天变黑夜示例

1.自定义变量

2.使用自定义变量

3. :root

4.白天黑夜切换示例

CSS自定义变量，白天变黑夜示例相关推荐

最新文章

热门文章