js实现网页换肤
本文实例为大家分享了js实现网页换肤的具体代码，供大家参考，具体内容如下
效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
height: 100%;
width: 100%;
}
#main{
height: 720px;
width: 100%;
background-color: pink;
}
button{
height: 15px;
width: 15px;
border: 1px solid #fff;
margin: 10px 10px;
}
#red{
background-color: red;
}
#green{
background-color: green;
}
#blue{
background-color: blue;
}
</style>
</head>
<body>
<div id="main">
<button type="button" id="red" onclick="red()"></button>
<button type="button" id="green" onclick="green()"></button>
<button type="button" id="blue" onclick="blue()"></button>
</div>
<script type="text/javascript">
var x=document.getElementById('main');
function red(){
x.style.backgroundColor='red';
document.getElementById('red').style.border="3px solid white";
document.getElementById('green').style.border="1px solid white";
document.getElementById('blue').style.border="1px solid white";
}
function green(){
x.style.backgroundColor='green';
document.getElementById('green').style.border="3px solid white";
document.getElementById('red').style.border="1px solid white";
document.getElementById('blue').style.border="1px solid white";
}
function blue(){
x.style.backgroundColor='blue';
document.getElementById('blue').style.border="3px solid white";
document.getElementById('red').style.border="1px solid white";
document.getElementById('green').style.border="1px solid white";
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js简单实现网页换肤功能
我发现网上写换肤功能写的有点长,就想想如何更简单方法实现这个功能,于是我自己写了一个. html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link id="changelink" rel="stylesheet" href="css/default.css&
-
js实现简单的网页换肤效果
中心思想:网页换肤的原理就是通过调用不同的样式表文件来实现不同的皮肤切换,并且需要将换好的皮肤计入Cookie中,这样用户已下次访问时,就可以显示用户自定义皮肤了 步骤: 1.在设计HTML代码时,用了一些小技巧,就是将皮肤选择按钮<li>元素的id与网页皮肤的样式文件名称设置的相同.这样就可以使完成换肤操作简化很多. 2.HTML结构要有一个带id的样式表链接,通过操作该链接的herf属性的值,从而实现换肤 <link rel="stylesheet" href=&
-
Javascript结合css实现网页换肤功能
Html代码部分: 1.要有一个带id的样式表链接,我们要通过操作这个链接来调用不同的href. <link href="css/main0.css" rel="stylesheet" type="text/css" id="cssfile" /> 2.皮肤选择按钮(后台为每个li添加onclick事件,触发换肤功能) <ul id="skin"> <li id="s
-
js+css简单实现网页换肤效果
本文实例讲述了js+css简单实现网页换肤效果.分享给大家供大家参考,具体如下: 这里做了3套外观,分别使用不同文件夹下的同名css文件,那么怎样实现js替换加载呢? 3个按钮如下: <a id="skin1" href="javascript:void(0)" class="easyui-linkbutton" onclick="changeCss('default')">蓝色皮肤</a><br
-
js实现网页换肤
本文实例为大家分享了js实现网页换肤的具体代码,供大家参考,具体内容如下 效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{
-
jQuery结合jQuery.cookie.js插件实现换肤功能示例
本文实例讲述了jQuery结合jQuery.cookie.js插件实现换肤功能.分享给大家供大家参考,具体如下: 上一次和大家分享了如何实现换肤功能,但是script代码好像有点长,所以这次打算使用cookie.js插件来实现换肤功能,好啦,我们开始吧. jQuery.cookie.js下载:https://github.com/carhartl/jquery-cookie/ 先来了解下cookie.js如何使用. 先导入: <script type="text/javascript&qu
-
jQuery实现的网页换肤效果示例
本文实例讲述了jQuery实现的网页换肤效果.分享给大家供大家参考,具体如下: 现在许多后台网站都有换皮肤的效果,今天我用 jquery 写了这个效果,主要思路是改变 link 标签的 href 属性值. html 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>网页换肤效果</title&
-
jQuery实现简单的网页换肤效果示例
本文实例讲述了jQuery实现简单的网页换肤效果.分享给大家供大家参考,具体如下: 这里有4个文件:skin.html.blue.css.green.html.red.html,都放在同一目录下. 1.skin.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
-
JS实现网站换肤
本文实例为大家分享了JS实现网站换肤的具体代码,供大家参考,具体内容如下 先看效果 1.左侧是待选择的图片列表2.点击对应图片自动为当前网站换背景图片3.为当前选择的图片加个2px的border 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" c
-
js实现一键换肤效果
本文实例为大家分享了js实现一键换肤效果的具体代码,供大家参考,具体内容如下 方法1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="
-
js+css实现换肤效果
本文实例为大家分享了js+css实现换肤效果的具体代码,供大家参考,具体内容如下 效果图如下: 需求:点击对应小圆点,下面内容颜色跟着改变 主要思路: 1.在css中把对应的样式先写好:2.获取小圆点给它绑定点击事件:3.获取当前点击元素的类名:4.将该类名设置给body: js主要考察的是获取属性值和设置属性值: <style> *{ margin:0; padding:0; list-style: no