2.1网页换肤

功能:鼠标点击不同的2个input进行换肤(切换样式表)

事件:onclick

属性:样式表link里的href

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">

<link id="l1" href="css1.css" rel="stylesheet" type="text/css"
charset="UTF-8">
</head>
<body>
<input id="input1" type="button" value="皮肤1" />
<input id="input2" type="button" value="皮肤2" />

<script src="js1.js"> </script>
</body>
</html>

////////////////css1

body{background: pink;}
#input1{
background:pink;
width:200px;
height:100px;
border:1px yellow solid;
}
#input2{
background:green;
width:200px;
height:100px;
border:1px yellow solid;
}

/////////////////css2

body{background: green;}
#input1{
background:pink;
width:100px;
height:50px;
border:1px blue solid;
}
#input2{
background:green;
width:100px;
height:50px;
border:1px blue solid;
}

//////////////////js

var input1=document.getElementById("input1");
var input2=document.getElementById("input2");
input1.onclick=function (){
var oL=document.getElementById("l1");
oL.href="css1.css";

};
input2.onclick=function (){
var oL=document.getElementById("l1");
oL.href="css2.css";

};

原文地址:https://www.cnblogs.com/luxiaoli/p/8503459.html

时间: 2024-11-26 11:15:42

2.1网页换肤的相关文章

作品第一课----网页换肤

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页换肤</title> <style type="text/css"> body, html { height: 100%; } body { margin:0; } li { list-style: none;width:

网页换肤

<!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-

1-2 网页换肤

网页换肤,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html"> <title>网页换肤</title> <style> body, ul,li

网页换肤效果的实现原理

效果原理: 准备几套CSS样式表 调式好每个CSS样式表的兼容性 在点击按钮时,改变link中href的值(js获取link标签,通过js改变href的值,link也可以给其id) HTML和js: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

很简单的JQuery网页换肤

现在介绍网页换肤的例子已经数不胜数,自己也没有仔细研究过,刚搞遇到类似这个问题,网上查了资料解决了问题,感觉很有用,就记录了下来和大家分享一下.效果很简单,我就直接讲怎么使用的. 其中用到了jquery.cookie.js 首先是html代码: <div id="header_demo"> <a id="logo" href="#">Rainweb</a> <ul id="skin"&

JS实现网页换肤功能

<!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> <title>JS实现网页换肤功能 -石家庄花卉出租 </ti

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

来源:http://www.php100.com/html/webkaifa/DIV_CSS/2008/1014/2326.html Html代码部分: 1.要有一个带id的样式表链接,我们要通过操作这个链接来调用不同的href. <link href="css/main0.css" rel="stylesheet" type="text/css" id="cssfile" /> 2.皮肤选择按钮(后台为每个li添

js网页换肤

使网页背景颜色可选黄/粉 <html> <head> <meta charset="utf-8"> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <title>网页换肤<

网页换肤,模块换肤,jQuery的Cookie插件使用(转)

具体效果如下: 第一次加载如下图: 然后点击天蓝色按钮换成天蓝色皮肤如下图: 然后关闭网页重新打开或者在打开另一个网页如下图: 因为皮肤用Cookie保存了下来,所以不会重置 具体的实现代码如下: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />

网页换肤其实是改变href的css样式表

<!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-Typ