1、css变量
如果每次用到的时候，都使用十六进制的颜色表示，那么效率十分低，并且如果万一有一天需要更换主题颜色，那么一个一个更改，是十分繁琐的。
为了解决以上问题，css引入了变量。
CSS变量可以访问 DOM，可以创建具有局部或全局范围的变量，使用 JavaScript 和媒体查询来修改变量。var() 函数用于插入 CSS 变量的值。全局变量可以在整个文档进行访问使用，局部变量只能在声明它的选择器内部使用。
例如：
:root{
--bg-color: #cccccc; } .father{
background-color: var(--bg-color); } :root声明的是全局变量，如果是一个自定义属性用–作为前缀，使用时比如: var(–bg-color)就和#cccccc相等。
好处:
注意事项：使用CSS变量要注意大小写敏感，不要把长度的变量用于颜色属性等。
2、实例
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document
title> <style> :root {
--bg-color: #1e90ff; --font-color: #cccccc; } #app {
width: 100px; height: 100px; background-color: var(--bg-color); color: var(--font-color); }
style>
head> <body> <div id="app"> <p>Hello World!
p>
div> <br /> <button onclick="changeColor()">切换背景色
button> <script> function changeColor() {
console.log(document.documentElement.style); document.documentElement.style.setProperty('--bg-color', 'black'); document.documentElement.style.setProperty('--font-color', 'white'); }
script>
body>
html> 
点击变色按钮后：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/214447.html原文链接：https://javaforall.net
