网站动态换肤

7各位如果为自己的网站动态的换肤是怎么操作的？

今天看到一个挺好的方法，到时可以试试。

这个方法是借助rel属性的alternate值实现。

<link href="https://code.zuifengyun.com/2021/03/reset.css" rel="stylesheet" type="text/css"> 
<link href="https://code.zuifengyun.com/2021/03/default.css" rel="stylesheet" type="text/css" title="默认"> 
<link href="https://code.zuifengyun.com/2021/03/red.css" rel="alternate stylesheet" type="text/css" title="红色"> 
<link href="https://code.zuifengyun.com/2021/03/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   type="radio" name="skin" value="default.css" checked>
<input   type="radio" name="skin" value="red.css">
<input   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>