此方法借助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 ; } }); }); });
转载于:https://www.cnblogs.com/flowertime/p/11541242.html
相关资源：JAVA上百实例源码以及开源项目