此方法借助HTML rel属性的alternate属性值实现。
<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个<link>元素，共出现了3中不同性质的CSS样式文件加载：
- 没有title属性，rel属性值仅仅是stylesheet的
<link>无论如何都会加载并渲染，如reset.css； - 有title属性，rel属性值仅仅是stylesheet的
<link>作为默认样式CSS文件加载并渲染，如default.css； - 有title属性，rel属性值同时包含alternate stylesheet的
<link>作为备选样式CSS文件加载，默认不渲染，如red.css和green.css
实现案例：
css代码：
/* default.css中 */
.box {
outline: 5px solid;
outline-offset: -5px;
}
/* red.css中 */
.box {
background-color: #cd0000;
color: #fff;
}
/* gren.css中 */
.box {
background-color: green;
color: orange;
}
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="绿色">
<div class="box">
<img src="../201808/book.jpg">
<p>背景色是？文字颜色是？</p>
</div>
<p>
选择样式：
<input id="default" type="radio" name="skin" value="default.css" checked><label for="default">默认</label>
<input id="red" type="radio" name="skin" value="red.css"><label for="red">红色</label>
<input id="green" type="radio" name="skin" value="green.css"><label for="green">绿色</label>
</p>
JS代码：
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;
}
});
});
});
此方法借助HTML rel属性的alternate属性值实现。
<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个<link>元素，共出现了3中不同性质的CSS样式文件加载：
- 没有title属性，rel属性值仅仅是stylesheet的
<link>无论如何都会加载并渲染，如reset.css； - 有title属性，rel属性值仅仅是stylesheet的
<link>作为默认样式CSS文件加载并渲染，如default.css； - 有title属性，rel属性值同时包含alternate stylesheet的
<link>作为备选样式CSS文件加载，默认不渲染，如red.css和green.css
实现案例：
css代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
/* default.css中 */.box { outline: 5px solid; outline-offset: -5px;}/* red.css中 */.box { background-color: #cd0000; color: #fff;}/* gren.css中 */.box { background-color: green; color: orange;} |
HTML代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<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="绿色"><div class="box"> <img src="../201808/book.jpg"> <p>背景色是？文字颜色是？</p></div><p> 选择样式： <input id="default" type="radio" name="skin" value="default.css" checked><label for="default">默认</label> <input id="red" type="radio" name="skin" value="red.css"><label for="red">红色</label> <input id="green" type="radio" name="skin" value="green.css"><label for="green">绿色</label></p> |
JS代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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; } }); });}); |