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;
}
});
});
});
link rel=alternate网站换肤功能的更多相关文章
- react实现网站换肤功能
一.目标 提供几种主题色给用户选择,然后根据用户的选择改变应用的主题色: 二.实现原理 1.准备不同主题色的样式文件: 2.将用户的选择记录在本地缓存中: 3.每次进入应用时,读取缓存 ...
- 使用 css/less 动态更换主题色(换肤功能)
前言 说起换肤功能,前端肯定不陌生,其实就是颜色值的更换,实现方式有很多,也各有优缺点 一.看需求是什么 一般来说换肤的需求分为两种: 1. 一种是几种可供选择的颜色/主题样式,进行选择切换,这种可供 ...
- 【转】Javascript+css 实现网页换肤功能
来源:http://www.php100.com/html/webkaifa/DIV_CSS/2008/1014/2326.html Html代码部分: 1.要有一个带id的样式表链接,我们要通过操作 ...
- 用js来实现页面的换肤功能(带cookie记忆)
用js来实现页面的换肤功能 js实现换肤功能的实现主要是通过利用js控制CSS来实现的.大致的实现原理是这样的, 1.先定义一个页面基本样式style.css来确定div的宽高等属性,使得整个页面的D ...
- JS实现网页换肤功能效果
网页换肤的基本原理 使用 JS 切换对应的 CSS 样式表.例如hao123首页的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过 ...
- 换肤功能的实现以及监听storage实现多个标签页一起换肤
1:需求:项目的侧边栏实现换肤功能,核心代码: updateSkin (val) { const existSkinLink = document.head.querySelector('link[i ...
- 基于webpack4+vue-cli3项目的换肤功能
起因 最近因公司需求,需要实现主题换肤功能,不仅仅是颜色的更改,还需要包括图片,字体等文件等更换,因此在百度里各种实现方案后,决定根据scss+style-loader/useable做换肤. 项目开 ...
- 一种简单的实现:Android一键换肤功能
现在的APP开发,通常会提供APP的换肤功能,网上流传的换肤代码和实现手段过于复杂,我把原作者的代码重新整理抽取出来,转换成Eclipse项目,重新整理成正确.可直接运行的项目. 代码运行结果如图. ...
- .NET vs2010中使用IrisSkin2.dll轻松实现winForm窗体换肤功能
IrisSkin2.dll是一款很不错的免费皮肤控件,利用它可以轻松的实现winForm窗体换肤! 网上很多朋友说在VS2010中不能使用IrisSkin2.dll,我这里提供一个取巧的办法. Iri ...
随机推荐
- Django中的缓存(内存,文件,redis)
一.Django中的缓存的几种方法 1)单个视图缓存.时间测试 import time from django.views.decorators.cache import cache_page @ca ...
- 在excel中如何利用vba通过网址读取网页title(网址是https的)?
昨天在百度知道上提了这个问题,我保存了些百度知道我回答的网址,想利用excel直接读取出网址的title,请问vba代码怎么写?(要支持https的) excel大神帮我回答了,在这记录下: Func ...
- Windows激活客户端 已停止工作
win+r 进入运行 slmgr /ipx 新的sn slmgr /ato
- Chrome浏览器用AdBlockPlus拦截百度广告
一:安装AdBlockPlus插件,这个貌似要FQ安装,不知道可不可以本地安装: 二:在右侧的扩展那里找到ABP扩展,然后设置-高级-我的过滤列表栏-开始创建我的过滤列表: 三:在列表栏里添加 bai ...
- 搭建repo服务器和上传源码
https://blog.csdn.net/qq_28449863/article/details/79992191 https://blog.csdn.net/qq_28449863/article ...
- PowerShell工作流学习-4-工作流中重启计算机
关键点: a)工作流中重新启动计算机,请使用Restart-Computer的Wait参数,Wait参数不仅适用于本地计算机,也适用于远程计算机. b)重启运行工作流的计算机,手工恢复请使用Resum ...
- 前端之html概述及基本结构
html概述: HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标 ...
- C程序编程规范一
和身边一些学弟们接触发现他们的编程习惯不是太好,对一些基本的规范不重视,今天有时间写一些基本的规范给一些刚入门的新手们,高手可忽略. 首先做项目来说需要建立工程,一般需要几个到几百个上上千个C文件,这 ...
- 用嵌入式块RAM IP核配置一个双口RAM
本次设计源码地址:http://download.csdn.net/detail/noticeable/9914173 实验现象:通过串口将数据发送到FPGA 中,通过quartus II 提供的in ...
- git代码同步服务器代码需要注意的问题
魔鬼藏在细节之中,git代码同步服务器代码需要注意的问题 1. 全文件夹覆盖 git pull 当前文件夹 2. 覆盖前做代码备份 mv origin origin_20190404_bak