首页 > 其他分享> > Web 前端（五）：JQ+属性选择器实现网页主题切换

Web 前端（五）：JQ+属性选择器实现网页主题切换

2022-06-02 23:31:43 作者：互联网

:root

CSS 全局变量都存放在:root中，因为它的优先级非常地高，所以一个网页的样式全局变量都放在这里。实际上html {} 就是 :root {}，JQuery 操作:root中的全局变量就是$("html")。

属性选择器

属性选择器不过多赘述，具体请看《CSS 选择器（一）：属性选择器》。在这里只作最简单的实例：

<div class="me you he"></div>
<div class="me you"></div>
<div class="me"></div>

div[class="me"] {
	color: red;
}

开始

点击按钮切换 div 的字体颜色，在使用:root中的全局变量时，运用到最重要的概念——CSS 变量以及 var() 函数。

<div class="theme">Theme Color.</div>
<button onclick="change()">切换</button>

:root[type='a'] {
	--theme-color: rgb(44, 127, 204);
}

:root[type='b'] {
	--theme-color: rgb(163, 39, 39);
}

.theme {
	color: var(--theme-color);
}

此时的<html>标签没有属性 type，当点击按钮之后 JQuery 为我们自动添加属性以及属性值，切换属性值就是切换 CSS 变量--theme-color的值，与此同时也就改变了var(--theme-color)的颜色：

let switchFlag = false;
function change() {
	if (switchFlag) {
		switchFlag = false;
		$('html').attr('type', 'a');
	} else {
		$('html').attr('type', 'b');
		switchFlag = true;
	}
}

点击按钮实际上就是在不停的给 --theme-color 添加颜色值，第一次是 rgb(44, 127, 204)，第二次是 rgb(163, 39, 39)，如此往复，实现主题颜色的切换。

标签：Web,color,JQ,--,theme,root,选择器,属性
来源： https://www.cnblogs.com/shiramashiro/p/16019705.html