简单的JS+CSS实现网页自定义换肤

JavaScript023

简单的JS+CSS实现网页自定义换肤,第1张

主要原理是利用 css 变量设置颜色，用 js 动态修改变量，使颜色变化，兼容性如下；

实现换肤之前先要了解一下伪类选择器 :root ，还有css的 var() 函数和 setProperty() 函数

:root 是一个伪类，表示文档根元素，非 IE 及 IE8 及以上浏览器都支持，在 :root 中声明相当于全局属性，只要当前页面引用了 :root 所在的文件，都可以使用css var() 函数来引用；

语法

var() 函数，可以代替元素中，任何属性中的值的任何部分； var() 函数不能作为属性名、选择器或者其他除了属性值之外的值，这样做通常会产生无效的语法或者一个没有关联到变量的值；

语法

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

语法

如果看了觉得有帮助的，我是@ 鹏多多11997110103 ，欢迎 点赞 关注 评论；END

往期文章

个人主页

别人项目中到底是怎么管理的我不知道， 就你举例的那几个问题可以瞎扯一下。

1. osc 的 js, css 加了版本参数是因为这些文件都被缓存在了客户端，当服务器有修改的时候把参数改一下，客户端会取最新的

2. 猪八戒JS和CSS， http://t4.zbjimg.com/min/ 是个后台服务，把参数传递给他的所有js 或者css 合并压缩成一个文件，为的是减少客户端的请求数（我想后台也应该有个合并后的缓存文件，最后的参数 v 和上面说的作用一样）

3. 百度的我没有帐号，也就没有去看， 如果真如你所说的那样js/css和每个用户相关，那可能是模版生成的吧。

4. css / js 放到单独的文件还是直接写在页面这是需要自己权衡。 共用的代码建议放到单独的文件，方便管理。 如果是某个页面才会用到那放到页面更合适。