×
JavaScript实现WordPress自由颜色主题切换
优畅主题 前端开发 2014-09-09 17:13 4,698 0 条评论

今天优畅和大家来谈谈怎么实现这样一个功能。其实很简单的。不管是换颜色和主题,原理都是一样的,即通个调用不同的CSS来替换掉当前的CSS而实现的;

就上面这个来说:
首先,它有个默认的style.css文件,这个CSS只负责整体的布局,不汲及颜色大小这些原素。然后会有5个CSS[a.css\b.css\c.css\d.css\e.css]文件,每个是一种风格。

默认情况下,载入的是style.css和a\b\c\d\e.css其中的一个,例如,默认情况下载入是style.css和a.css。这样就一种风格,当点击第二种后,b.css文件中的ID和类和a.css文件中的一样,只是属性不同而已,而根据CSS的优先级后面的会复盖前面的属性,所以现在变成style.css和b.css.这就是另一种风格了。

同理,c\d\e.css都一样会复盖上一个CSS文件。换色其实就是这样实现的!当然,效果是实现了,不过还有不足这处,那就是这样的话只能实简单的换色,刷新后就又会回到默认的CSS了,也就是style.css和a.css。因为我们换了CSS文件后并没有保存到COOKIE,所以刷新后又会回到原来的。当然,这不是我们希望的。所以我们在切换到另一种风格时,要把它写入COOKIS从而让浏览器记住,现在是哪个CSS文件。这样就不会刷新后失效了!原理就是这样了.


如果本文对你有帮助,你可以扫描右边的二维码打赏,谢谢支持
联系优畅:uctheme#qq.com (#改为@)
微信订阅号:优畅主题(uctheme)
官网淘宝店:http://uctheme.taobao.com
版权声明:版权归 优畅主题 所有,转载请注明出处!
转载请保留链接: https://www.uctheme.com/917.html
谢谢微信打赏

微信钱包扫描赞助

谢谢支付宝打赏

支付宝扫一扫赞助

品牌创立:2012-11-18优畅主题

优畅主题成立于2012年11月18日,专业Wordpress导购主题开发商,拥有多年Wordpress主题设计经验,专门为淘宝客和导购客站长量身打造高端赚钱模板,我们注重细节,有着严谨的开发态度,一切从客户角度出发,如果你也喜欢 WordPress导购主题,欢迎和我们一起交流!

上一篇 CSS实现自动换行的小技巧 CSS图片垂直居中方法整理 下一篇

7 + 0 = ?

目前还没有评。

切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册