Javascript 动态切换样色表

最新推荐文章于 2021-11-18 17:00:27 发布

cranedingNO1

最新推荐文章于 2021-11-18 17:00:27 发布

阅读量240

点赞数

分类专栏： html 文章标签： JavaScript CSS 框架 XHTML HTML ViewUI

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

现在越来越多的网站都做到可以用户自己选择样色，其原理就是通过用户的选择来切换加载不同的样色表，当然你的页面必须是有比较好的框架、布局等等。下面就以一个比较简单的例子来说明是怎么实现的：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="orange.css" type="text/css" title="orange" />
<script language="javascript" type="text/javascript" src="changecss.js"></script>
</head>

<body>
<div class="div-one">
	<h1 style="margin:0;">NO. 1</h1>
</div>

<div class="div-two">
	<h1 style="margin:0;">NO. 2</h1>
</div>
<div class="div-three">
  <input type="button" value="change color" onclick="changeActiveStyleSheet()"/>
</div>
</body>
</html>


//changecss.js
function changeActiveStyleSheet(){
var i,a,href;
for(i=0;(a=document.getElementsByTagName('link')[i]);i++)
if(a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title')){
	if(a.href.indexOf('green')!=-1)
		href = "orange";
	else if(a.href.indexOf('orange')!=-1)
		href = "green";
	else
		href = "orange";
	a.href = href + ".css";
}


@charset "utf-8";
/* orange.css */
.div-one{
	float:left;
	width:200px;
	height:200px;
	opacity = 0.7;
	background:orange;
	text-align:center;
	line-height:200px;
	border:green 1px dashed;
	filter:Alpha (opacity = 70);
}

.div-two{
	float:left;
	width:200px;
	height:200px;
	background:green;
	text-align:center;
	line-height:200px;
	border: orange 1px dashed;
}

.div-three{
	float:left;
	width:200px;
	height:200px;
	text-align:center;
}

.div-three input{
	margin:45% 0;
}


@charset "utf-8";
/* green.css */
.div-one{
	float:left;
	width:200px;
	height:200px;
	opacity = 0.7;
	background:green;
	text-align:center;
	line-height:200px;
	border: orange 1px dashed;
	filter:Alpha (opacity = 70);
}

.div-two{
	float:left;
	width:200px;
	height:200px;
    background:orange;
	text-align:center;
	line-height:200px;
	border:green 1px dashed;
}

.div-three{
	float:left;
	width:200px;
	height:200px;
	text-align:center;
}

.div-three input{
	margin:45% 0;
}

cranedingNO1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript 动态切换样色表

现在越来越多的网站都做到可以用户自己选择样色，其原理就是通过用户的选择来切换加载不同的样色表，当然你的页面必须是有比较好的框架、布局等等。下面就以一个比较简单的例子来说明是怎么实现的：[code="html"]无标题文档 NO. 1 NO. 2 [/code][code="js"]...
复制链接

扫一扫

专栏目录