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. 把相同的部分封装成函数,即 同个 ...
随机推荐
- 代码正常,junit却报错原因及解决方法
junit测试,不能有参数 和static,去掉static测试正常;
- 洛谷—— P2387 魔法森林
题目描述 为了得到书法大家的真传,小 E 同学下定决心去拜访住在魔法森林中的隐 士.魔法森林可以被看成一个包含 n 个节点 m 条边的无向图,节点标号为 1,2,3,…,n,边标号为 1,2,3,…, ...
- 关于Java的10个谎言
以下的这些都算是比較高级的问题了.面试中一般也非常少问到.由于它们可能会把面试者拒之门外.只是你能够自己找个时间来实践一下. System.exit(0)会跳过finally块的运行 System.s ...
- 具体解释window.location
window.location 对象所包括的属性 hash//从井号 (#) 開始的 URL(锚) host//主机名和当前 URL 的port号 hostname//当前 URL 的主机名 href ...
- leetCode 82.Remove Duplicates from Sorted List II (删除排序链表的反复II) 解题思路和方法
Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct numb ...
- UVA 12493 Stars (欧拉函数--求1~n与n互质的个数)
pid=26358">https://uva.onlinejudge.org/index.phpoption=com_onlinejudge&Itemid=8&cate ...
- Vue v-bind的使用
1.src <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...
- DG 参数详解
1.与角色无关的参数 ◆ DB_UNIQUE_NAME:数据库唯一名.对于物理standby,DB_NAME必须相同,对于逻辑standby,DB_NAME可以不同,所以在10g中引入DB_UNIQU ...
- 源码安装 ipython
https://blog.csdn.net/huobanjishijian/article/details/51470898
- spring boot 热启动
spring boot热启动有两种方式 1. 以Maven插件的形式去加载,所以启动时使用通过Maven命令mvn spring-boot:run启动,而通过Application.run方式启动的会 ...