css切换

借助HTML rel属性的alternate属性值实现。示意HTML如下：

<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="绿色">

上面4个元素，共出现了3中不同性质的CSS样式文件加载：

1没有title属性，rel属性值仅仅是stylesheet的无论如何都会加载并渲染，如reset.css；

2有title属性，rel属性值仅仅是stylesheet的作为默认样式CSS文件加载并渲染，如default.css；

3有title属性，rel属性值同时包含alternate stylesheet的作为备选样式CSS文件加载，默认不渲染，如red.css和green.css；

var eleLinks = document.querySelectorAll('link[title]');
var eleRadios = document.querySelectorAll('input[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) {
                link.disabled = false;
            }
        });
    });
});