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

 

link rel=alternate网站换肤功能的更多相关文章

  1. react实现网站换肤功能

    一.目标   提供几种主题色给用户选择,然后根据用户的选择改变应用的主题色: 二.实现原理   1.准备不同主题色的样式文件:   2.将用户的选择记录在本地缓存中:   3.每次进入应用时,读取缓存 ...

  2. 使用 css/less 动态更换主题色(换肤功能)

    前言 说起换肤功能,前端肯定不陌生,其实就是颜色值的更换,实现方式有很多,也各有优缺点 一.看需求是什么 一般来说换肤的需求分为两种: 1. 一种是几种可供选择的颜色/主题样式,进行选择切换,这种可供 ...

  3. 【转】Javascript+css 实现网页换肤功能

    来源:http://www.php100.com/html/webkaifa/DIV_CSS/2008/1014/2326.html Html代码部分: 1.要有一个带id的样式表链接,我们要通过操作 ...

  4. 用js来实现页面的换肤功能(带cookie记忆)

    用js来实现页面的换肤功能 js实现换肤功能的实现主要是通过利用js控制CSS来实现的.大致的实现原理是这样的, 1.先定义一个页面基本样式style.css来确定div的宽高等属性,使得整个页面的D ...

  5. JS实现网页换肤功能效果

    网页换肤的基本原理 使用 JS 切换对应的 CSS 样式表.例如hao123首页的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过 ...

  6. 换肤功能的实现以及监听storage实现多个标签页一起换肤

    1:需求:项目的侧边栏实现换肤功能,核心代码: updateSkin (val) { const existSkinLink = document.head.querySelector('link[i ...

  7. 基于webpack4+vue-cli3项目的换肤功能

    起因 最近因公司需求,需要实现主题换肤功能,不仅仅是颜色的更改,还需要包括图片,字体等文件等更换,因此在百度里各种实现方案后,决定根据scss+style-loader/useable做换肤. 项目开 ...

  8. 一种简单的实现:Android一键换肤功能

    现在的APP开发,通常会提供APP的换肤功能,网上流传的换肤代码和实现手段过于复杂,我把原作者的代码重新整理抽取出来,转换成Eclipse项目,重新整理成正确.可直接运行的项目. 代码运行结果如图. ...

  9. .NET vs2010中使用IrisSkin2.dll轻松实现winForm窗体换肤功能

    IrisSkin2.dll是一款很不错的免费皮肤控件,利用它可以轻松的实现winForm窗体换肤! 网上很多朋友说在VS2010中不能使用IrisSkin2.dll,我这里提供一个取巧的办法. Iri ...

随机推荐

  1. linux mysql 5.7.25 安裝

    1.下载 https://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.25-linux-glibc2.12-x86_64.tar.gz 2.解压 tar ...

  2. 滑块视图容器   swiper

    属性名 类型 默认值 说明 indicator-dots Boolean false 是否显示面板指示点 autoplay Boolean false 是否自动切换 current Number 0 ...

  3. 基于UML的毕业选题系统建模研究

    一.基本信息 标题:基于UML的毕业选题系统建模研究 时间:2018 出版源:电脑迷 领域分类:UML建模技术 二.研究背景 问题定义:为了加强学生设计分析开发软件的相关能力,有效避免结构化模型存在的 ...

  4. 51nod1683

    代码参考:http://blog.csdn.net/sdfzyhx/article/details/74359927 //dp[i][j][k]表示到了第i列,最下边的点最短路为j,剩下的点之间的关系 ...

  5. Codeforces Round #540 (Div. 3)--1118C - Palindromic Matrix

    https://codeforces.com/contest/1118/problem/C 在查找元素的时候,必须按4,2,1的顺序进行.因为,如果先找1,可能就把原来的4拆散了,然后再找4,就找不到 ...

  6. Cura - CuraEngine - 架构分析

    参考: https://blog.csdn.net/justdoithai/article/details/52746094

  7. jupyter Notebook环境搭建

    1.什么是jupyter notebook jupyter notebook是一种 Web 应用,能让用户将说明文本.数学方程.代码和可视化内容全部组合到一个易于共享的文档中.它可以直接在代码旁写出叙 ...

  8. Apollo配置管理系统使用

  9. 重新编译安装swoole支持OpenSSL

    1.下载:wget http://pecl.php.net/get/swoole-1.9.22.tgz 2.解压:tar zxvf swoole-1.9.22.tgz 3.扩展模块:cd swoole ...

  10. ajax跨域问题小结

    跨域:跨域名的访问,是浏览器对ajax的一种限制,这样可以有效的房子跨站攻击 跨域的范畴: 域名不同  或 端口不同 或 二级域名不同 解决方案: 第一种:由于前端基础薄弱,且该方式老掉牙,不讲解: ...