JS学习笔记 - fgm练习 - 网页换肤
总结:
1. 点击按钮,div内部变色,边框保持颜色不变。
实现原理:其实本来就把background 和 border 分别设置了同一个颜色,看似是一个整体,其实本来就是分开的。
那么点击的时候,只需要更改background 的颜色。 border 部分不需要设置。
2. for in 循环,遍历数组的用法:
for(var p in oSkin) oSkin[p].className = ""; 等价于下面的代码:
for(var i=0; i<aDiv.length; i++)
{
3. 把要更改的式样分别用外部样式表存起来,只更改引入link的href值。
oLink['href'] = this.id + ".css";
疑问:
1. 更改类名,引发按钮的背景色变化,CSS里要设置 !important 才生效, 原理是?
.active{
background: white!important;
/* 这里设置了important才能生效,原理? */
}
案例写的:
<link href="green.css" rel="stylesheet" type="text/css" />
<script>
window.onload = function ()
{
var oLink = document.getElementsByTagName("link")[0];
var oSkin = document.getElementById("skin").getElementsByTagName("li"); for(var i = 0; i< oSkin.length; i++)
{
oSkin[i].onclick = function ()
{
for(var p in oSkin) oSkin[p].className = "";
this.className = "current";
oLink['href'] = this.id + ".css";
}
} };
</script>
自己做的:
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}
body{
background-color: #a3c5a8;
}
ul{
margin: 5px auto;
width: 500px;
height: 25px;
display: block;
border: 1px solid white;
background: green;
}
ul li{
list-style: none;
float: left;
width: 83px;
text-align: center;
box-sizing: border-box;
border-right: 1px solid white;
}
ul li:last-child{
border: none;
}
ul li a{
color: white;
text-decoration: none;
font-size: 12px;
line-height: 25px;
}
ul li a:hover{
text-decoration: underline;
}
#outer{
margin: 8px auto;
width: 500px;
}
/* .click_div{
width: 14px;
height: 14px;
display: inline-block;
margin-right: 7px;
} */
#outer div{
margin-right: 7px;
border-width: 4px;
border-style: solid;
width: 6px;
height: 6px;
display: inline-block;
}
/* 选色按钮的构成:background 6px
border 4px *2, 一共14px
每次点击,border颜色不变,设置background颜色变化。 */
#div1{
background-color: red;
border-color: red;
}
#div2{
background-color: green;
border-color: green;
}
#div3{
background-color: black;
border-color: black;
}
.active{
background: white!important;
/* 这里设置了important才能生效,原理? */
}
</style> <script>
window.onload = function()
{
oDivOuter = document.getElementById('outer');
aDiv = oDivOuter.getElementsByTagName('div'); var oBody = document.getElementsByTagName('body')[0]; // 用TagName记得指定是第几个
var oUl = document.getElementsByTagName('ul')[0]; // var btnColor = this.style.backgroundColor; var oBodyColor = ["pink", "#a3c5a8", "#ccc"];
var oUlColor = ["red", "green", "black"] for(i=0; i<aDiv.length; i++)
{
aDiv[i].index = i; aDiv[i].onclick = function()
{
for(var i=0; i<aDiv.length; i++)
{
aDiv[i].className = '';
};
this.className = "active"; // this.style.border = "4px" + btnColor + "solid"; oBody.style.backgroundColor = oBodyColor[this.index];
oUl.style.backgroundColor = oUlColor[this.index];
};
};
};
</script>
</head>
<body>
<div id="outer">
<div id="div1"></div>
<div id="div2" class="active"></div>
<div id="div3"></div>
<ul>
<li><a href="javascript:;">新闻</a></li>
<li><a href="javascript:;">娱乐</a></li>
<li><a href="javascript:;">体育</a></li>
<li><a href="javascript:;">电影</a></li>
<li><a href="javascript:;">音乐</a></li>
<li><a href="javascript:;">旅游</a></li>
</ul>
</div>
</body>
JS学习笔记 - fgm练习 - 网页换肤的更多相关文章
- JS学习笔记 - fgm练习 2-12- 全选反选 判断CheckBox是否选中 &&运算符
练习地址:http://www.fgm.cc/learn/lesson2/12.html 总结: 1. && 运算符,从左向右依次执行,如果遇到 false,就不再继续执行后面的语句 ...
- JS学习笔记 - fgm练习 2-11- 改变图片路径 var img = new Image(); 图片预加载
<style> *{ margin: 0;padding: 0; list-style: none; } body{ background: black; } .outer{ margin ...
- JS学习笔记 - fgm练习 2-5 - 函数传参 设置div样式
练习地址:http://www.fgm.cc/learn/lesson2/05.html <script> window.onload = function(){ var oDiv = d ...
- JS学习笔记 - fgm练习 - 鼠标移入/移出div样式改变
思路: div的默认样式正常设置. 鼠标移入时,发生改变的样式有3个,即 边框颜色,div背景色,字体颜色. 把这三个css改变设置在一个类名下,再通过js给div动态 添加/去除这个类名,实现div ...
- JS学习笔记 - fgm练习 - 数字自增 定时器 数字比大小Math.max
<script> window.onload = function(){ var oP = document.getElementsByTagName('p')[0]; var i = 0 ...
- JS学习笔记 - fgm练习 - 限制输入框的字符类型 正则 和 || 或运算符的运用 i++和++i
<script> window.onload = function(){ var aInp = document.getElementsByTagName('input'); var oS ...
- JS学习笔记 - fgm练习 - 输入数字求和 正则replace onkeyup事件
<style> body{font-size: 12px;} .outer{ width: 500px; margin: 0 auto; } span{ color: #999; } in ...
- JS学习笔记 - fgm练习 - 输入法下拉框 三元表达式
<script> window.onload = function() { var oBtn = document.getElementsByTagName('input')[0]; va ...
- JS学习笔记 - fgm练习 - 多按钮控制同个div属性
总结: 1. 注意body里的结构安排,全部装在大div,避免多次设置不同部分居中. 2. 一排按钮居中:装在大div里,text-align: center; 3. 把相同的部分封装成函数,即 同个 ...
随机推荐
- Java并发包之CountDownLatch用法
CountDownLatch计数器闭锁是一个能阻塞主线程,让其他线程满足特定条件下主线程再继续执行的线程同步工具. Latch闭锁的意思,是一种同步的工具类.类似于一扇门:在闭锁到达结束状态之前,这扇 ...
- xadmin列表页添加自定义工具栏toolbar
通过xadmin的Plugin实现,adminx.py中 class Link2AdminPlugin(BaseAdminPlugin): link_2_admin = False def init_ ...
- 使用Microsoft excel 2007 进行数据分析---环境配置
使用Microsoft excel 2007 进行数据分析---环境配置 使用前须要安装SQL server 2008 data mining Add-ins for Microsoft excel ...
- jquery09--Callbacks : 回调对象
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- Css盒模型有哪几部分,标准盒模型和IE盒模型有哪些区别
首先介绍Css的盒模型也就是标准盒模型(BOX Model) 包含了 内容(content) 内边距(padding) 边框(border) 外边框(margin) 这是大家经常用到的,也是现在的标准 ...
- spring源码分析之@Conditional
根源在AnnotationConfigApplicationContext和AnnotationConfigWebApplicationContext,以AnnotationConfigApplica ...
- Android Studio 解决unspecified on project app resolves to an APK archive which is not supported
出现该问题unspecified on project app resolves to an APK archive which is not supported as a compilation d ...
- deep-in-es6(四)
不定参数和默认参数: function containsAll(str) { for(var i = 1;i < arguments.length;i++) { var hasStr = arg ...
- Linux之lldptool命令
1. 描述 当我们想在操作系统里面查看网口和交换机连接的状态信息,我们可以使用lldptool这个工具. 2.LLDP协议 LLDP是一个数据链路层发现协议,LLDP协议使得接入网络的一台设备可以将其 ...
- golang 简单web服务
1.golang print输入 package main import "fmt" func main() { fmt.Printf("Hello World!\n&q ...