css实现换肤功能

最新推荐文章于 2024-06-24 17:03:01 发布

qwqasd123456

最新推荐文章于 2024-06-24 17:03:01 发布

阅读量630

点赞数

原文链接：https://blog.csdn.net/u010730897/article/details/81116958

版权

使用css的自定义属性，和getComputedStyle（），setProperty（），getPropertyValue（）来实现

css的自定义样式（--是css的变量声明）

：root{

--theme-color：#f00

}

getComputedStyle（elem，伪）：返回的是一个该elem的所有属性（自定义属性），如果第二个参数没有设置，则不会返回伪类的样式。

getPropertyValue（）:方法返回指定的 CSS 属性的值。

setProperty() 方法用于设置一个新的 CSS 属性，同时也可以修改 CSS 声明块中已存在的属性

例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3自定义属性实现换肤功能</title>
<style type="text/css">
:root{
--theme-color:#989898;
}

#header{
width: 100%;
height: 50px;
line-height: 50px;
background-color: var(--theme-color);
margin-bottom: 30px;
}
#header h1{
color: #fff;
}
button{
width: 100px;
height: 30px;
color: #fff;
border:none;
}
#btn-red{
--btn-red:red;
background-color: var(--btn-red)
}
#btn-black{
--btn-black:black;
background-color: var(--btn-black)
}
#btn-blue{
--btn-blue:blue;
background-color: var(--btn-blue)
}
</style>
</head>
<body>
<header id="header">
<h1>CSS3自定义属性实现换肤功能Demo</h1>
</header>

<div>
<button id="btn-red">red</button>
<button id="btn-black">black</button>
<button id="btn-blue">blue</button>
</div>

</script>
</body>
</html>

qwqasd123456

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
css实现换肤功能

使用css的自定义属性，和getComputedStyle（），setProperty（），getPropertyValue（）来实现css的自定义样式（--是css的变量声明）：root{ --theme-color：#f00}getComputedStyle（elem，伪）：返回的是一个该elem的所有属性（自定义属性），如果第二个参数没有设置，则不会返回伪类的样式。...
复制链接

扫一扫