您的位置：首页 > Web前端 > JavaScript

【原理】看别人做了一个单页面换主题

2017-12-15 16:41 274 查看

原文地址：

http://www.blueidea.com/tech/web/2006/3183.asp

三个文件，分别是：

csstran.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

<link rel="alternate stylesheet" type="text/css" title="b" href="b.css" />
<link rel="stylesheet" type="text/css" title="a" href="a.css" />

</head>

<body>
<h1>换css</h1>

<input type="button" value="a" onclick="setStyle('a');" />
<input type="button" value="b" onclick="setStyle('b');" />

<script type="text/javascript">
function setStyle(title) {

//预定义变量
var i, links;

//用DOM方法获得所有的link元素
links = document.getElementsByTagName("link");

for (i = 0; links[i]; i++) {

//判断此link元素的rel属性中是否有style关键字
//即此link元素是否为样式表link
//同时判断此link元素是否含有title属性
if (links[i].getAttribute("rel").indexOf("style") != -1 &&
links[i].getAttribute("title")) {

//先不管三七二十一把它设为disabled
links[i].disabled = true;

//再判断它的title中是否有我们指定的关键字
if (links[i].getAttribute("title").indexOf(title) != -1)

//如果有则将其激活
links[i].disabled = false;
}
}
}
</script>
</body>

</html>
a.css

body{
background-color: aqua;
color:rgb(255, 168, 127);
}
b.css

body{
background-color: rgb(0, 60, 255);
color:rgb(53, 226, 218);
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端 javascript

相关文章推荐

新的分享

章节导航