CSS样式切换技巧 - 动态更换网页色彩皮肤
Copy code
<link rel="stylesheet" href="green.css" type="text/css" title="green" media="screen, projection"/>
<link rel="alternate stylesheet" href="yellow.css" type="text/css" title="yellow" media="screen, projection"/>
var i, a, main;
if (title) {
for(i=0; (a = document.getElementsByTagName('link')[i]); i++) {
if(a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title')) {
a.disabled = true;
if(a.getAttribute('title') == title) a.disabled = false;
}
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName('link')[i]); i++) {
if(a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title') && !a.disabled) return a.getAttribute('title');
}
return null;
}
在合适的地方加入三个切换按钮
<a href="javascript :void()" return false;" title="绿色样式"></a>
<a href="javascript :void()" return false;" title="×××样式"></a>
<a href="javascript :void()" return false;" title="没有样式"></a>
补遗:带有记忆功能的JS文档
var i, a, main;
for(i=0; (a = document.getElementsByTagName
("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style")
!= -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title)
a.disabled = false;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName
("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style")
!= -1 && a.getAttribute("title") && !a.disabled)
return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName
("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+";
path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return
c.substring(nameEQ.length,c.length);
}
return null;
}
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie :
getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie :
getPreferredStyleSheet();
setActiveStyleSheet(title);
转载于:https://blog.51cto.com/skyintheseacjt/159113
CSS样式切换技巧 - 动态更换网页色彩皮肤相关推荐
- 实现js动态设置css样式,js动态设置全局样式主题色
需求: 1.设置一个全局的样式 2. 样式是需要动态改变的,改变的内容是通过请求后台接口获取的,因此需要js能够对css进行改变 实现: 或许你可能不相信,代码只需要几行 js代码: // 设置主题色 ...
- jq动态修改css样式表,jquery 动态改变css样式
jquery 几乎成了现在开发WEB应用的标准JS库,这与其简单性和易用性是分不开的.作为一个后端开发人员,要做一些前端页面时,CSS 样式的控制是少不了需要掌握的.如果是静态的CSS,当然是可以直接 ...
- CSS 样式修改技巧及心得汇总
相信你的眼睛,而不是数字!!! 结构要和样式分离!!! 设置网页的字体样式: html, body, div, p, h1, h2, h3, h4, h5, h6, select, input, li ...
- html5 js 修改css样式,JavaScript修改css样式style_javascript技巧_脚本之家
一.局部改变样式 分为改变直接样式,改变className和改变cssText三种.需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把"N&quo ...
- html的css样式第四个标签,网页制作中css+div定义标签样式的4种基本用法
第一类:内联样式 内联样式是写在标签里面的样式,它可以给单独的标签使用特别的样式. 例如: 这是内联样式 这是内联样式 那么如果要给多个标签加上相同的样式,使用下面的内部样式,是比较简便快速的方法. ...
- WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式 能力目标 Ø 理解CSS的 ...
- 使用ASP.NET的外观文件(skin)与css样式表
使用ASP.NET的外观文件(skin)与css样式表 文章目录 使用ASP.NET的外观文件(skin)与css样式表 题目 涉及知识 1.制作皮肤 2.皮肤里设置css样式 一.运行截图 二.代码 ...
- [分享]MOSS的CSS样式说明,一个老外总结的
以前找到的一个SharePoint 2007 的样式说明文件,虽然不全但是还算不错的东西,分享给大家. CSS样式说明 这里是原网页地址:http://www.heathersolomon.com/c ...
- html样式表是不是css,css样式是什么
什么是css样式? 一.CSS样式定义 - TOP 简单地讲,CSS样式全称为Cascading Style Sheets,中文翻译为"层叠样式表",简称样式表有被我们称为 ...
- 引入css样式属于链接式的是,(5)css样式导入
样式的组成 1.选择器:将样式与页面中的某一个或某些标签建立联系,就要使用选择器,在head标签下写一个style标签,将需控制参数的标签名写在这个style标签下,设置属性即可通过css来控制htm ...
最新文章
- SQL: ORA-00979 不是 GROUP BY 表达式 及 Group by 的用法说明
- B+树检索的时间复杂度
- c++ 13.二维数组
- [Java 并发编程实战] 设计线程安全的类的三个方式(含代码)
- Git命令:常用Git命令集合
- 5个Python函数,算天花板水平?
- 如何检查计算机账号克隆
- 修改远程服务器的端口号
- Qt学习之路系列教程目录
- R语言拟合ARIMA模型
- vue前端怎么导出图片_Vue将页面导出为图片或者PDF
- centos linux安装网卡驱动,如何在CentOS系统下安装网卡驱动
- Visual C++编译错误:error C2220: 警告被视为错误 - 没有生成“object”文件
- 北大计算机图灵班,北大首期“图灵班”开班
- 项立刚:乔布斯展现了人类无尽的创造力
- android中gravity什么意思,浅谈android 中layout_gravity和gravity
- 《Django By Example》读书笔记 02
- 阿里云扩容云盘(CentOS 7系统)
- 任务管理器中查看文件被哪个进程占用
- 51nod 1479 小Y的数论题
热门文章
- linux编辑音频文件,Linux 上的最佳音频编辑工具推荐
- 蓝桥杯2017年第八届C/C++省赛B组第四题-方格分割
- ADT(Android) — Eclipse开发NOX夜神安卓模拟器如何进行横竖屏切换
- 安卓recovery流程分析【第一篇】
- 文本输入框,实现模糊搜索结果
- 32、[源码]-AOP原理-创建AOP代理
- spotlight on mysql--安装以及简介
- unittest测试框架详谈及实操(一)
- acm常见错误-持续更新
- template 不能分别在.h和.cpp中定义模板