网站换肤方案汇总
- >
- 话题 >
1、实现网站换肤功效，一样平常最先想到的是用全局class控制样式切换
瑕玷：全局控制CSS，在项目不大，换肤样式不多的情况下，还能委曲够用。然则换肤样式许多的话，代码会异常臃肿，不利于维护。
2、切换引入CSS样式的href属性值，来到达切换样式的目的。
<link id="skin" rel="stylesheet" href="/go/?url=./skin/skin.css" class="target" rel="external nofollow"> 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则不渲染。
1.阿里云: 本站现在使用的是阿里云主机，平安/可靠/稳固。点击领取2000米代金券、领会最新阿里云产物的种种优惠流动点击进入
2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各种产物的最新流动，优惠券领取点击进入
3.广告同盟: 整理了现在主流的广告同盟平台，若是你有流量，可以作为参考选择适合你的平台点击进入
链接: http://www.fly63.com/article/detial/4725
- 发表于 2021-04-03 11:14
- 阅读 ( 225 )
- 分类：互联网
