1, 实现网站换肤功能, 一般最先想到的是用全局 class 控制样式切换
缺点: 全局控制 CSS, 在项目不大, 换肤样式不多的情况下, 还能勉强够用. 但是换肤样式很多的话, 代码会非常臃肿, 不利于维护.
2, 切换引入 CSS 样式的 href 属性值, 来达到切换样式的目的.
- <link id="skin" rel="stylesheet" href="./skin/skin.css">
- document.querySelector('#skin').href = ""
缺点: 使用 JS 改变 href 属性会带来加载延迟, 样式切换不流畅的弊端.
3, 通过 JS 替换 CSS 文件中换肤样式的属性值来实现换肤.
样式多的话代码会臃肿, 样式切换不流畅
缺点: IE 兼容性差
4, 在翻阅 CSS MDN 的时候, 发现 link 标签的 rel 属性有一个 alternate 属性值可以实现控制 CSS 加载.
4.1, 没有 title 属性, rel 属性值仅仅是 stylesheet 的 < link > 会默认加载并渲染
4.2, 有 title 属性, rel 属性值仅仅是 stylesheet 的 < link > 作为默认样式 CSS 文件加载并渲染, 如: theme-default.CSS
4.3, 有 title 属性, rel 属性值同时包含 alternate stylesheet 的 < link > 作为备选样式, CSS 文件会加载但默认不渲染. 如: theme-wsjd.CSS
alternate 是一个非常有意思的特性, 我们可通过 JS 控制该 CSS 是否渲染, 使用 JavaScript 修改 < link>, 元素 DOM 对象的 disabled 值为 false, 可以让默认不渲染的 CSS 开始渲染, 设为 true 则不渲染.
自己是一个 6 年的前端工程师, 希望本文对你有帮助!
这里推荐一下我的前端学习交流扣 qun:731771211 , 里面都是学习前端的, 如果你想制作酷炫的网页, 想学习编程. 自己整理了一份 2019 最全面前端学习资料, 从最基础的 html+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 每天分享技术
点击: 加入
来源: http://www.jianshu.com/p/66f4642781d6