JS学习笔记 - fgm练习 - 多按钮控制同个div属性
总结:
1. 注意body里的结构安排,全部装在大div,避免多次设置不同部分居中。
2. 一排按钮居中:装在大div里,text-align: center;
3. 把相同的部分封装成函数,即 同个 oDiv,都是attr 属性 设置 value。
var changeStyle = function (elem, attr, value)
{
elem.style[attr] = value
};
4. 用数组的方式,把每个要设置的attr 和 对应的 value 装起来,直接到数组里用this.index调用, 避免代码重复。
var oAtt = ["width","height","background","display","display"];
var oVal = ["200px","200px","red","none","block"];
5. 用for循环 来加点击事件,获取当前点击的按钮,并调用前面封装的设置属性的函数。 避免代码重复。
this.index == oBtn.length - 1 && (oDiv.style.cssText = "");
且运算符,当第一个条件成立时,才运行第二步。
即,当oBtn[i]是最后一个按钮的时候,才把cssText设置为空。 即重置样式。
for (var i = 0; i < oBtn.length; i++)
{
oBtn[i].index = i;
oBtn[i].onclick = function ()
{
this.index == oBtn.length - 1 && (oDiv.style.cssText = "");
changeStyle(oDiv, oAtt[this.index], oVal[this.index])
};
};
<style>
#outer{width:500px;margin:0 auto;padding:0;text-align:center;}
#div1{width:100px;height:100px;background:black;margin:10px auto;display:block;}
</style>
<script>
var changeStyle = function (elem, attr, value)
{
elem.style[attr] = value
};
window.onload = function ()
{
var oBtn = document.getElementsByTagName("input");
var oDiv = document.getElementById("div1");
var oAtt = ["width","height","background","display","display"];
var oVal = ["200px","200px","red","none","block"]; for (var i = 0; i < oBtn.length; i++)
{
oBtn[i].index = i;
oBtn[i].onclick = function ()
{
this.index == oBtn.length - 1 && (oDiv.style.cssText = "");
changeStyle(oDiv, oAtt[this.index], oVal[this.index])
}
}
};
</script>
</head>
<body>
<div id="outer">
<input type="button" value="变宽" />
<input type="button" value="变高" />
<input type="button" value="变色" />
<input type="button" value="隐藏" />
<input type="button" value="重置" />
<div id="div1"></div>
</div>
</body>
错误记录:
<script>
var changeStyle = function(obj, attr, value)
{
obj.style[attr] = value;
}
// 这种函数的位置应该在window.onload 外面还是里面?
// 放在外面,和window.onload 平级。 window.onload = function()
{
// var oDiv = document.getElementById('outer'); 这里不需要获取外层div,外层的只在设置css样式时发挥作用。
var oDiv1 = document.getElementById('div1'); // 从div里获取元素,不能用ById ?
var oBtn = oDiv.getElementsByTagName('input'); var attr = ["width", "height", "background", "display"];
// var value = [200, 200, "red", "none"]; 注意传入函数里的值是字符串,不能直接写数字。
var value = ["200px", "200px", "red", "none"]; for (var i=0; i<oBtn.length; i++)
{
oBtn[i].index = i;
oBtn[i].onclick = function()
{
// if(i = oBtn.length - 1) 还不是特别搞清楚 i 和 this.index
if(this.index == oBtn.length - 1)
{
oDiv1.style.cssText = '';
}
else
{
changeStyle(oDiv1, attr[this.index], value[this.index])
};
};
};
};
</script>
JS学习笔记 - fgm练习 - 多按钮控制同个div属性的更多相关文章
- JS学习笔记 - fgm练习 2-5 - 函数传参 设置div样式
练习地址:http://www.fgm.cc/learn/lesson2/05.html <script> window.onload = function(){ var oDiv = d ...
- JS学习笔记 - fgm练习 - 限制输入框的字符类型 正则 和 || 或运算符的运用 i++和++i
<script> window.onload = function(){ var aInp = document.getElementsByTagName('input'); var oS ...
- 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练习 - 鼠标移入/移出div样式改变
思路: div的默认样式正常设置. 鼠标移入时,发生改变的样式有3个,即 边框颜色,div背景色,字体颜色. 把这三个css改变设置在一个类名下,再通过js给div动态 添加/去除这个类名,实现div ...
- JS学习笔记 - fgm练习 - 网页换肤
总结: 1. 点击按钮,div内部变色,边框保持颜色不变. 实现原理:其实本来就把background 和 border 分别设置了同一个颜色,看似是一个整体,其实本来就是分开的. 那么点击的时候,只 ...
- JS学习笔记 - fgm练习 - 数字自增 定时器 数字比大小Math.max
<script> window.onload = function(){ var oP = document.getElementsByTagName('p')[0]; var i = 0 ...
- 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 ...
随机推荐
- LeetCode 258 Add Digits(数字相加,数字根)
翻译 给定一个非负整型数字,反复相加其全部的数字直到最后的结果仅仅有一位数. 比如: 给定sum = 38,这个过程就像是:3 + 8 = 11.1 + 1 = 2.由于2仅仅有一位数.所以返回它. ...
- 数据库SQL Server2012笔记(四)——多表查询、子查询、分页查询、用查询结果创建新表和外连接
1.多表查询 1)笛卡尔集: select * from 表名1,表名2 select * from 表名1.表名2 where 表名1.字段名=表名2.字段名 注: 若有两张表有同 ...
- Java 位运算符 深入理解
在Java中存在着这样一类操作符,是针对二进制进行操作的.它们各自是&.|.^.~.>>.<<.>>>几个位操作符.不管是初始值是依照何种进制,都会换 ...
- poi excel自己主动转换成javabean 支持引用类型属性二级转换
近期项目须要使用excel导入功能.导入学生的时候须要指定所在班级,使用excel一次性导入! 将曾经的代码改改支持属性内引用类的转换. 測试对象为User对象,javabean结构: private ...
- Day5费用流
算法 zkw费用流:多路增广,增光D[y]=D[i]+c的边 无源汇上下界最小费用可行流 每次强行增加下界的流量 类似网络流,拆边 原边的费用为c,拆出来的边费用为0 负边和负圈 直接应用 SDOI2 ...
- Cisco交换机SPAN&RSPAN调试实录
Cisco交换机SPAN&RSPAN设置实录 本文出自 "李晨光原创技术博客" 博客,请务必保留此出处http://chenguang.blog.51cto.com/3 ...
- Android java.lang.NoSuchFieldError: No static field xxx of type I in class Lcom/XX/R$id; or its superclasses
项目开发快到尾声,突然发现之前一个模块莫名其妙的奔溃了,我的内心也是奔溃的.以前一直都是好好的,也没去动过它,为啥会出现这样的问题呢? 下面我会根据自己的理解来看待问题 android是怎么根据id查 ...
- 【Henu ACM Round #12 C】 Alice, Bob, Two Teams
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 考虑任意两个字符串(a,b) 假设a在b的前面 那么如果a+b>=b+a 这里的+表示字符串的链接 那么显然需要交换a,b的位 ...
- [ReasonML] Workshops code
/* list of strings */ let _ = ["example-1", "example-2", "example-3"]; ...
- 在带(继承)TextView的控件中,在代码中动态更改TextView的文字颜色
今天由于公司项目需求,须要实现一种类似tab的选项卡,当时直接想到的就是使用RadioGroup和RadioButton来实现. 这种方法全然没问题.可是在后来的开发过程中,却遇到了一些困扰非常久的小 ...