换肤功能

核心：当<link>标签rel="alternate" 和 title都设置值时。该外部css文件是不渲染 的，可以通过js来控制该link 的disabled = false，使其开始渲染。从而达到换肤的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>换肤功能</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/default.css" title="默认">
    <link rel="alternate stylesheet" href="css/red.css" title="红色">
    <link rel="alternate stylesheet" href="css/skyblue.css" title="天蓝色">
</head>
<body>
<section>
</section>
<nav>
    <p>换肤：</p>
    <input id="default" type="radio" name="skin" value="css/default.css" checked><label for="default"></label>
    <input id="red" type="radio" name="skin" value="css/red.css"><label for="red"></label>
    <input id="green" type="radio" name="skin" value="css/skyblue.css"><label for="green"></label>
</nav>
<script>
    const eleLinks = document.querySelectorAll('link[title]'); //获取样式文件
    const radios = document.querySelectorAll('input[type=radio]'); //获取控制换肤颜色
    [...radios].forEach(item=>{
        item.addEventListener('click',function () {
            const value = this.value;
            [...eleLinks].forEach(item2=>{
                item2.disabled = true
                if(item2.href.includes(value)){
                    item2.disabled = false
                }
            })
        })
    })
</script>
</body>
</html>