各位如果为自己的网站动态的换肤是怎么操作的?
一般动态更新<style>
标签内的样式字符串,使用CSS变量实现全局控制。<style>
标签中只传入变量,在具体的样式中使用var(--aaa)
引入。
今天看到一个挺好的方法,到时可以试试。
这个方法是借助rel
属性的alternate
值(候补属性)实现。
<link href="reset.css" rel="stylesheet" type="text/css">
<link href="default.css" rel="stylesheet" type="text/css" title="默认">
<link href="red.css" rel="alternate stylesheet" type="text/css" title="红色">
<link href="green.css" rel="alternate stylesheet" type="text/css" title="绿色">
上面这四个<link>
元素,略有不同,涉及到阻塞渲染css的问题。
- 没有title属性,rel属性值仅仅是stylesheet的默认会加载并渲染,如reset.css;
- 有title属性,rel属性值仅仅是stylesheet的作为默认样式CSS文件加载并渲染,如default.css;
- 有title属性,rel属性值同时包含alternate stylesheet的作为备选样式CSS文件加载,默认不渲染,如red.css和green.css;
另外,<link>
标签添加disabled属性,也会阻止其渲染,可以手动改变其值:link.disabled =
true
、 link.disabled = false
可以看下如何实现一个换肤:
<input id="default" type="radio" name="skin" value="default.css" checked>
<input id="red" type="radio" name="skin" value="red.css">
<input id="green" type="radio" name="skin" value="green.css">
<script>
var eleLinks = document.querySelectorAll('link[title]');
var eleRadios = document.querySelectorAll('[type="radio"]');
[].slice.call(eleRadios).forEach(function (radio) {
radio.addEventListener('click', function () {
var value = this.value;
[].slice.call(eleLinks).forEach(function (link) {
link.disabled = true;
if (link.getAttribute('href') == value) {
// 该样式CSS文件生效
link.disabled = false;
}
});
});
});
</script>
本文固定连接:https://code.zuifengyun.com/2021/03/2124.html,转载须征得作者授权。