link标签 rel=“ alternate“ 应用解析

最新推荐文章于 2024-07-23 03:40:55 发布

Whitemeen太白

最新推荐文章于 2024-07-23 03:40:55 发布

阅读量5.4k

点赞数 2

分类专栏：前端文章标签： html link

本文链接：https://blog.csdn.net/demo_yo/article/details/109202554

版权

前端专栏收录该内容

4 篇文章 1 订阅

订阅专栏

一、link标签rel="alternate"属性的作用及用法：

1.链接外部样式表：

<link rel="alternate" type="text/css" href="out.css">

rel属性定义当前.html文档与被链接的.css文档之间的关系。
rel=“stylesheet” 表示当前文档的外部样式表。
rel=“alternate” 表示当前文档的可替换样式表。

2.联合使用：

<link rel="stylesheet" type="text/css" href="out.css">			<!--作为默认样式表-->
<link rel="alternate" type="text/css" href="out.css">			<!--作为可替换样式表-->

用户可选择替换样式，实现自由切换界面样式。但需要浏览器支持。例如一些网站会给网页定义多个配色，或者多个主题，明色和暗色。

rel=alternate的页面是默认不会渲染的，可以作为后备样式，对link使用disabled即可进行切换，无延迟。但是，提前下载，会浪费单宽，可以在必要的场景下使用。

还有一个与rel对应的属性rev，rel表示从源文档到目标文档的关系，rev表示从目标文档到源文档的关系。rev在HTML5 中已不支持。

3.可用于将PC版页面指向移动版页面，将移动版页面指向PC版页面，这样有利于搜索引擎，对不同设备的用户提供不同类型的页面

PC版本页面head应添加

<link rel="alternate" media="only screen and (max-width:640px)" href="http://m.mobile.com" >

移动版页面应添加

<link rel="canonical" href="http://wwww.pc.com" >

二、Html主题样式切换方法

1.切换样式表引用：

编写两套样式 them1.css 、them2.css 通过js 动态切换 link 标签的属性，或追加目标主题样式表、清除现有样式表；Fixfox 浏览器可以通过浏览器切换 link 样式表，但是IE 浏览器不支持，需要手动实现。

优点：简单、快捷、方便。

缺点：由于是切换引用css 文件，会由于网络原因造成加载css 文件延迟、或由于javascript 错误阻塞造成切换失败，不利于客户体验。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS主题切换</title>
<link rel="stylesheet" type="text/css" href="a.css" title="a">
<link rel="alternate stylesheet" type="text/css" href="b.css" title="b">
<script>
 // 对切换主题的按钮绑定事件，用来做触发
document.getElementById("sheet-a").addEventListener("click",function(){
    setStyleSheet("a");
});
document.getElementById("sheet-b").addEventListener("click",function(){
    setStyleSheet("b");
});
/**
 * 查找所有的link标签，找到符合条件的css进行切换
 * @title:需要切换的css文件名称，也可以是某值，主要是能够找到所要切换的link标签
 **/
function setStyleSheet(title){ 
    // 首先找到DOM中所有的link标签
    var link_list = document.getElementsByTagName("link");
    if ( link_list ){
        for ( var i=0;i<link_list.length;i++ ){
            // 要找到所有link中rel属性值包括style的，也就是包括stylesheet和alternate stylesheet;
            if ( link_list[i].getAttribute("rel").indexOf("style") != -1 ){
                // 将符合条件的link的disabled的属性设为true，都改为禁用；
                link_list[i].disabled = true;
                // 然后判断link标签中的title属性，找到我们需要替换的css文件
                // 找到后将该link的disabled改为启用；
                if ( link_list[i].getAttribute("title") === title){
                    link_list[i].disabled = false;
                }
            }
        }
    }
};
</script>
 
</head>
<body>
    <div class="main">
        <div class="con">
            <input type="button" id="sheet-a" value="主题a" />
            <input type="button" id="sheet-b" value="主题b" />
        </div>
    </div>
</body
</html>