link rel=alternate 实现网页主题切换
灵感来源：
https://www.zhangxinxu.com/wordpress/2019/02/link-rel-alternate-website-skin/
MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Alternative_style_sheets
换皮肤的一些方法
- 切换类名
<style>.light {background-color: #fff;color: #000;}.dark {background-color: #000;color: #fff;}
style><body class='light'>
...
body>
- 切换
样式表的href地址 - link rel=alternate
样式表分为三类
- 持久样式，没有
rel="alternate"title="..."的样式表：总是应用于文档
"stylesheet" href="./reset.css">
- 首选样式，没有
rel="alternate"有title="..."：只有第一个带title的会生效，alternate 样式表设置disabled为false后，可以无视title的顺序
"stylesheet" href="./S1.css" title="box1">
"stylesheet" href="./S2.css" title="box2">
"stylesheet" href="./S3.css" title="box3">
- 备用样式，有
rel="alternate stylesheet", title="..."：默认禁用，可以选择
<link rel="stylesheet" href="./lightTheme.css" title="light">
<link rel="stylesheet alternate" href="./darkTheme.css" title="dark" disabled><script>document.querySelector('link[title="dark"]').disabled = false;
script>
代码实现
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><link rel="stylesheet" href="./lightTheme.css" title="light"><link rel="stylesheet alternate" href="./darkTheme.css" title="dark" disabled>
head><body><label for="light">明亮label><input id="light" type="radio" name="theme" value="light" checked><label for="dark">暗黑label><input id="dark" type="radio" name="theme" value="dark">
body>
html><script>var themes = document.querySelectorAll('link[title]');var radios = document.querySelectorAll('[type="radio"]');/* 现代化写法 */Array.from(radios).forEach(radio => {radio.addEventListener('click', () => {Array.from(themes).forEach(function (theme) {theme.disabled = theme.title !== radio.value;})})});/* 兼容IE9+ */// [].slice.call(radios).forEach(function (radio) {// radio.addEventListener('click', function () {// var value = this.value;//// [].slice.call(themes).forEach(function (theme) {// theme.disabled = theme.title !== value;// })// })// })
script>
总结
-
所有
都会请求 -
有
alternate属性的标签会在最后请求 -
备用样式表要有
rel="alternate stylesheet"和title="..."，还要 disabled （官网没说要） -
兼容IE9+
-
语义化更好
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！