码迷,mamicode.com
首页 > Web开发 > 详细

link rel=alternate网站替换功能

时间:2019-09-18 12:55:44      阅读:100      评论:0      收藏:0      [点我收藏+]

标签:文件   each   tom   java   import   js代码   get   ima   nta   

此方法借助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 {
    outline5px solid;
    outline-offset: -5px;
}
/* red.css中 */
.box {
    background-color#cd0000;
    color#fff;
}
/* gren.css中 */
.box {
    background-colorgreen;
    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;
            }
        });
    });
});

 

link rel=alternate网站替换功能

标签:文件   each   tom   java   import   js代码   get   ima   nta   

原文地址:https://www.cnblogs.com/flowertime/p/11541242.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!