CSS变量的基本使用是怎样 怎样做主题切换
|
本篇内容介绍了“CSS变量的基本使用是怎样，如何做主题切换”的有关知识，在实际项目的操作过程或是学习过程中，不少人都会遇到这样的问题，接下来就让小编带大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ CSS 变量 基本用法 声明一个变量，属性名需要以两个减号（--）开始，属性值则可以是任何有效的CSS值。 element { --main-bg-color: brown; } 选择器是指定变量的可见作用域，该变量仅用于匹配当前选择器及其子孙，通常的最佳实践是定义在根伪类 :root 下，这样就可以在HTML文档的任何地方访问到它了。 :root { --main-bg-color: brown; } 使用一个局部变量时用 var() 函数包裹以表示一个合法的属性值: element { background-color: var(--main-bg-color); } 备用值 用 var() 函数可以定义多个备用值(fallback value)，当给定值未定义时将会用备用值替换 备用值并不是用于实现浏览器兼容性的。如果浏览器不支持CSS自定义属性，备用值也没什么用 color: var(--my-var, red); background-color: var(--my-var, var(--my-background, pink)); 有效性 传统的CSS概念里，有效性和属性是绑定的，这对变量来说并不适用。当变量被解析，浏览器不知道它们什么时候会被使用，所以必须认为这些值都是有效的。 即便这些值是有效的，但当通过 var() 函数调用时，它在特定上下文环境下也可能不会奏效。属性和自定义变量会导致无效的CSS语句，这引入了一个新的概念：计算时有效性。 <p>This paragraph is initial black.</p> :root { --text-color: 16px; } p { color: blue; } p { color: var(--text-color); } 浏览器将 --text-color 的值替换给了 var(--text-color)，但是 16px 并不是 color 的合法属性值。代换之后，该属性不会产生任何作用。浏览器会执行如下两个步骤： 检查属性 color 是否为继承属性。是，但是 <p> 没有任何父元素定义了 color 属性。转到下一步。 将该值设置为它的默认初始值，black。 当CSS属性-值对中存在语法错误，该行则会被忽略。然而如果自定义属性(变量)的值无效，它并不会被忽略，从而会导致该值被覆盖为默认值。 JavaScript 中的值 // 获取一个 Dom 节点上的 CSS 变量 element.style.getPropertyValue("--my-var"); // MDN上给的，但获取一直是空的，其他两个倒是没问题 // 获取任意 Dom 节点上的 CSS 变量 getComputedStyle(element).getPropertyValue("--my-var"); // 修改一个 Dom 节点上的 CSS 变量 element.style.setProperty("--my-var", jsVar + 4); 主题切换 <!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> * { margin: 0; padding: 0; } :root { --bg: #000; --fontSize: 25px; } .pink-theme { --bg: hotpink; } body { transition: background 1s; background: var(--bg); } button { position: fixed; top: 50%; left: 50%; transition: color 1s; transform: translate(-50%, -50%); padding: 20px; border: none; background: #fff; font-size: var(--fontSize); color: var(--bg); } </style> </head> <body> <button>点击切换</button> <script> document.querySelector("button").addEventListener("click", () => { if (document.body.classList.contains("pink-theme")) { document.body.classList.remove("pink-theme"); } else { document.body.classList.add("pink-theme"); } }); </script> </body> </html> 现在大家对于CSS变量的基本使用是怎样，如何做主题切换的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。 （编辑：汽车网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
