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代码：

/* 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;

}

});

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

时间： 2024-10-12 15:19:01

link rel=alternate网站替换功能的相关文章

<link rel="icon" href="images/favicon.ico.png" /> 插入网站最上面标题旁的图标

JavaScript HTML5 手机网站基本功能

让网页的宽度自适应屏幕<meta name="viewport" content="width=device-width"/> 1)html上加入<meta name="viewport" content=" initial-scale=1.0,user-scalable=no" />发确保网页的效果 2)加上以下语句可使网页在苹果设备上运行更好<meta name="apple-m

下面教你用dreamweaver 8的替换功能来删除这些冗余代码. 查找范围:文件夹(然后选取你需要替换的文件夹) 搜索:源代码查找:\btppabs="h[^"]*" 替换:(为空) 勾选:使用正则表达式点替换全部按钮,好了,全部完成. 比如用正则表达式把下面的链接去掉 <a href='/tags.php?/123.html/' class='tagc1'>太阳能仪表</a> 搜索:源代码查找:<a\s*href=('|").*?

小项目-购物网站个别功能的具体实现思路（新手）

第一步: /* * 用户注册的界面. * 用户点击注册按钮,会跳转到注册界面,用户填写完注册信息则会跳转到此Servlet. * 在此Servlet中我们首先需要设置编码格式. * 第二步是获取请求参数,就是用户在注册界面填写的信息. * 第三步则是需要验证用户名是否已经被注册,如果已经被注册则提示用户名被占用. * 如果没有被注册则将用户的信息添加到数据库表中. * 最后请求转发到注册界面. * * 该Servlet需要配合注册的JSP页面进行使用. * */ 第二步: /* * 登录界面的实

20_Shell语言———VIM编辑器基础知识三之窗口属性定制、配置文件及查找替换功能

Vim编辑器可以让用户按照需求来定制一些使用属性. 一.窗口属性定义 1)显示行号行号不是内容,只是用来帮助用户确认文本所在的行.在vim编辑器中,如果要显示行号,可以在末行模式下输入: set number 如果想关闭,则可以在功能名称前面加上no,即: set nonumber 命令可以被简写,如set number 可以简写为 set nu:set nonumber 可以简写为 set nonu. 注意,上述设定仅对当前vim的进程有效,一旦当前进程关闭,这些设定就会失效,如果要使设定永

shell入门-sed-2替换功能

sed的替换功能和vim语法挺像的把1到10行的nologin替换成login [[email protected] ~]# sed '1,10s/nologin/login/g' 1.txt root:x:0:0:root:/root:/bin/bashbin:x:1:1:bin:/bin:/sbin/logindaemon:x:2:2:daemon:/sbin:/sbin/login .... vcsa:x:69:69:virtual console memory owner:/dev:/

Java基础知识强化41：StringBuffer类之StringBuffer的替换功能

1. StringBuffer的替换功能: public StringBuffer replace(int start, int end, String str): 2. 案例演示: 1 package cn.itcast_04; 2 3 /* 4 * StringBuffer的替换功能: 5 * public StringBuffer replace(int start,int end,String str):从start开始到end用str替换 6 */ 7 public cl

文件内容替换功能

实现替换功能:分别传入文件名源字符串和要修改后的字符串,实现将文件内容源字符串被替换成修改后的字符串要求不产生新文件: import sys,os with open (sys.argv[1],'r') as fr open('a.txt.bak','w+') as fw: src_res=fr.read() dst_res=src_res.replace(sys.argv[2],sys.argv[3]) fw.write(dst_res) os.remove(sys.argv[1]) os.r

SharePoint需要开启的网站集功能

1. 管理网站功能 2. 网站集功能