CSS变量-网站一键换色功能思路

    选择打赏方式

本站已不再更新,最新资源请前往zcjun.com获取!

这个是用css变量来写的,完整demo复制保存查看

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>css变量</title>
<style>
:root{
    --color: purple;
}
div.div{
    --color: green;
}
#alert{
    --color: red;
}
*{
    color: var(--color);
}
</style>
</head>
<body>
	<div style="width: 100%;height: 150px;background-color: var(--color)"></div>
<p>请问我是什么颜色 --purple</p>
<div class="div">请问我是什么颜色--green</div>
<div id="alert">
    请问我是什么颜色--red
    <p>请问我是什么颜色--red</p>
    <p style="--color: grey;">请问我是什么颜色--grey</p>
</div>
<div id="box"><input onchange="change(this.value)" type="color" id="myColor"></div>
<script>
// 读取数据
const rootStyles = getComputedStyle(document.documentElement);
const varValue = rootStyles.getPropertyValue('--color').trim();
console.log(rootStyles)
console.log(varValue)

// 改写数据
function change(e){
// const mycolor = document.getElementById("myColor").value;
document.documentElement.style.setProperty('--color', e);
console.log(e)
}
</script>
</body>
</html>

版权声明:若无特殊注明,本文皆为《 子成君 》原创,转载请保留文章出处。
本文链接:CSS变量-网站一键换色功能思路 https://old.zcjun.com/learn/518.html
百度收录:本文已被百度收录点击查看详情!
本文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

爱你允悲悲伤吃惊委屈可怜憧憬吃瓜大哭开心坏笑笑哭哼打哈欠鼓掌乖嘘阴险日了狗费解挤眼滑稽666比心


既然没有吐槽,那就赶紧抢沙发吧!