核心：當<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>