link rel=alternate网站替换功能

此方法借助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 ;              }          });      }); });