网页风格化 用CSS实现皮肤适时切换

html-css048

网页风格化 用CSS实现皮肤适时切换,第1张

首先准备好几种风格的css文件：

样式部分：

<link id="css" rel="stylesheet" type="text/css" href="style.css"/>

js部分

function redCSS(){

document.getElementById("css").href="red.css"

}

html部分

<span onclick="redCSS">切换红色风格</span>

如果需要下次打开页面抱持这个风格，那么需要用到cookie

前端中有用到需要设置主题颜色，根据用户喜欢实现换肤的可以使用css中:root定义变量的方式，或者使用动态切换引入的外部css样式表实现，这里着重记录下动态修改css中:root定义的变量实现换肤：

这里定义变量必须是以'--'开头，然后其他页面的样式表就可以直接引用这个变量了

至此就完成了动态修改:root变量实现换肤了，具体的应用场景中我们应该是在页面上操作，选中需要的肤色然后修改:root定义的变量值，考虑到浏览器刷新会重置原始状态的值，这里要结合本地存储方式记住选中的肤色，具体的实现参考：