总结:

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++)
{
  aDiv[i].className = '';
 };

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练习 - 网页换肤的更多相关文章

  1. JS学习笔记 - fgm练习 2-12- 全选反选 判断CheckBox是否选中 &&运算符

    练习地址:http://www.fgm.cc/learn/lesson2/12.html 总结: 1.  && 运算符,从左向右依次执行,如果遇到 false,就不再继续执行后面的语句 ...

  2. JS学习笔记 - fgm练习 2-11- 改变图片路径 var img = new Image(); 图片预加载

    <style> *{ margin: 0;padding: 0; list-style: none; } body{ background: black; } .outer{ margin ...

  3. JS学习笔记 - fgm练习 2-5 - 函数传参 设置div样式

    练习地址:http://www.fgm.cc/learn/lesson2/05.html <script> window.onload = function(){ var oDiv = d ...

  4. JS学习笔记 - fgm练习 - 鼠标移入/移出div样式改变

    思路: div的默认样式正常设置. 鼠标移入时,发生改变的样式有3个,即 边框颜色,div背景色,字体颜色. 把这三个css改变设置在一个类名下,再通过js给div动态 添加/去除这个类名,实现div ...

  5. JS学习笔记 - fgm练习 - 数字自增 定时器 数字比大小Math.max

    <script> window.onload = function(){ var oP = document.getElementsByTagName('p')[0]; var i = 0 ...

  6. JS学习笔记 - fgm练习 - 限制输入框的字符类型 正则 和 || 或运算符的运用 i++和++i

    <script> window.onload = function(){ var aInp = document.getElementsByTagName('input'); var oS ...

  7. JS学习笔记 - fgm练习 - 输入数字求和 正则replace onkeyup事件

    <style> body{font-size: 12px;} .outer{ width: 500px; margin: 0 auto; } span{ color: #999; } in ...

  8. JS学习笔记 - fgm练习 - 输入法下拉框 三元表达式

    <script> window.onload = function() { var oBtn = document.getElementsByTagName('input')[0]; va ...

  9. JS学习笔记 - fgm练习 - 多按钮控制同个div属性

    总结: 1. 注意body里的结构安排,全部装在大div,避免多次设置不同部分居中. 2. 一排按钮居中:装在大div里,text-align: center; 3. 把相同的部分封装成函数,即 同个 ...

随机推荐

  1. leetcode 数据库十题记录

    题目从难到易记录.解题过程中,如果不太熟悉,可以将题目中的表自己手动录入到自己的数据库中,就方便学习,测试. 185. Department Top Three Salaries 要求就是查询出每个部 ...

  2. codeforces 543 C Remembering Strings

    题意:若一个字符串集合里的每一个字符串都至少有一个字符满足在i位上,仅仅有它有,那么这个就是合法的,给出全部串的每一个字符修改的花费,求变成合法的最小代价. 做法:dp[i][j].前i个串的状态为j ...

  3. log4j+slf4j迁移到log4j2+slf4j (Servlet3.0)

    近期对系统中的旧项目实现log升级,选择了log4j2来取代log4j.作为最新一代的log实现.log4j2好在那里能够直接看log4j2性能章节. 这里写写怎样从log4j升级到log4j2. 1 ...

  4. [Codeforces558E]A Simple Task 线段树

    链接 题意:给定一个长度不超过 \(10^5\) 的字符串(小写英文字母),和不超过5000个操作. 每个操作 L R K 表示给区间[L,R]的字符串排序,K=1为升序,K=0为降序. 最后输出最终 ...

  5. Typedef和#define之间的区别

    Typedef和define都可以用来给对象取一个别名,但是两者却有着很大不同. 1. 首先,二者执行时间不同 关键字typedef在编译阶段有效,由于是在编译阶段,因此typedef有类型检查的功能 ...

  6. Kinect 开发 —— Kinect Interaction 交互控件

    Kinect Interactions 提供了一些新的带有姿势识别的控件如 push-to-press 按钮, grip-to-pan 列表控件, 而且支持多用户,同时二个人进行的交互,这些新添加的控 ...

  7. Tomcat之虚拟主机配置以及web应用配置

    Tomcat之虚拟主机配置以及web应用配置 Tomcat文件夹结构例如以下: bin ---- 启动和关闭须要的bat文件所在的文件夹 conf --- 配置文件夹 lib ---  tomcat执 ...

  8. iOS应用笔记之git的本地使用

    什么是git (1)什么是git >git是一个 "分布式"的版本号控制工具 >git的作者是Linux之父:Linus Benedict Torvalds,当初开发g ...

  9. 漫话C++之string字符串类的使用(有汇编分析)

    C++中并不提倡继续使用C风格的字符串,而是为字符串定义了专门的类,名为string. 使用前的准备工作 在使用string类型时,需要包含string头文件,且string位于std命名空间内: # ...

  10. makeMtk- user 版本编译

    有时候我们需要在我们的手机上编译user 版本,先说一下user 跟eng版本的区别 user:这个版本是没有root权限的,当你adb shell进入后,linux下显示的是$,不可以push ap ...