JavaScript小练习1-控制div属性
题目
要实现的效果如图所示：查看演示
分析
乍一看还以为十分简单，就是简单的点击button时触发的函数来改变样式值，不过做到后面就开始打脸了——“重置”功能。其实要实现重置功能，硬做还是可以的，就是cssText=“整个style表”，但是这么做太暴力了，十分不优雅，结果看了人家的源码真的是佩服的五体投地。
首先注意CSS的三种创建方式
- 内联样式/行内样式(inline style)
- 内部样式表(internal style sheet)
- 外部样式表(external style sheet)
JS如何获取CSS样式
获取内联样式
<div id ="myDiv" style="width:100px;height:100px;background-color:red; border:1px solid black;"></div>
<script>
var myDiv = document.getElementById("myDiv"); alert(myDiv.style.width);//100px alert(myDiv.style['height']);//100px var style=myDiv.style;
alert(style.backgroundColor);//red myDiv.style.backgroundColor='green';//myDiv背景色变为绿色
</script>
这种情况下，获取和设置样式靠style属性就可以了，有ele.style.属性名称和ele.style["属性名称"]两种方式。
要注意的是，对于CSS样式中的background-color等短杠连接的属性名称，在使用style获取属性设置样式的时候名称要改成驼峰式，即ele.style.backgroundColor或者ele.style['backgroundColor']。获取外联样式（内部/外部样式表）（待更新）
也就是说，一般情况下，我们都只能访问和设置行内样式！访问外联样式需要其他方法实现。
cssText的用法
用来设置行内样式。
ele.style.cssText="CSS样式表";//添加行内样式
ele.style.cssText="";//可以清除行内样式
这次的小练习中用到了ele.style.cssText=""的用法来实现重置功能，这条语句只会清除行内样式，对样式表中设置的内容没有改动。
window.onload的使用方法
window.onload加载事件在页面内容加载完成之后立即执行相应的函数。
使用方法：
onclick有相同用法：
- obj.onclick = function() {//function body//}
- function func() {//function body//}
obj.oncllick = func();
&& 和 || 的特殊用法
a() && b() :如果执行a()后返回true，则执行b()并返回b的值；如果执行a()后返回false，则整个表达式返回a()的值，b()不执行；
a() || b() :如果执行a()后返回true，则整个表达式返回a()的值，b()不执行；如果执行a()后返回false，则执行b()并返回b()的值；
&& 优先级高于 ||。
alert((1 && 3 || 0) && 4); //结果4
alert(1 && 3 || 0 && 4); //结果3
alert(0 && 3 || 1 && 4); //结果4
代码
我的代码：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Reading Test</title>
<style type="text/css">
.main {
margin: 30px;
text-align: center;
}
#rectangle {
width: 100px;
height: 100px;
margin: 20px auto;
background: red;
}
</style>
</head>
<body>
<div class="main">
<button>变宽</button>
<button>变高</button>
<button>变色</button>
<button>隐藏</button>
<button>重置</button>
<p id="rectangle"></p>
</div>
<script>
function changeCss(oDiv, oAttr, oVal) {
oDiv.style[oAttr] = oVal; //变量访问样式属性，用ele.style['oAttr']
}
window.onload = function() {
var oBtn = document.getElementsByTagName("button");
var oDiv = document.getElementById("rectangle");
var oAttr = ["width", "height", "backgroundColor", "display", "display"];
var oVal = ["200px", "200px", "blue", "none", "block"];
alert()
for(var i = 0; i < oBtn.length; ++ i) {
oBtn[i].index = i;//注意！！
oBtn[i].onclick = function() {
//这里绑定的回调函数是匿名函数，不会执行，但是当事件发生调用函数时，循环已经结束了
if (this.index == 4) { //内部引用自己用this，用oBtn[i]会报错
oDiv.style.cssText = "";
}
//简洁用法：
// this.index == oBtn.length - 1 && (oDiv.style.cssText = "");
changeCss(oDiv, oAttr[this.index], oVal[this.index]);
}
}
}
</script>
</body>
</html>
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
body{
text-align: center;
}
div{
width: 100px;
height: 100px;
background: black;
margin:20px auto;
}
</style>
<body>
<input type="button" value="变宽" />
<input type="button" value="变高" />
<input type="button" value="变色" />
<input type="button" value="隐藏" />
<input type="button" value="重置" />
<div id="div1"></div>
<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>
</body>
</html>
总结
这一次的小练习提升的知识点：
- 使用对象/数组遍历访问的思想；
- cssText用法，内联样式的访问和设置；
- && 和 || 的特殊用法；
- window.onload=function(){};
- this初步了解；
- 闭包和作用域的初步接触；
JavaScript小练习1-控制div属性的更多相关文章
- 原生Javascript实现控制DIV属性
写在前面: 从事前端工作已有一年之久,因为工作的性质,不太涉及JS方面,所以自己的JS水平一直处于小白阶段,工作闲暇之余,在网上找了一些小项目,希望练练手,促进自己成长.这是第一篇,后续还会有很多记录 ...
- 01 使用JavaScript原生控制div属性
写在前面: 因对前端开发感兴趣,于是自学前端技术,现在已经会HTML.CSS.JavaScript基础技术.但水平处于小白阶段,在网上找一些小项目练练手,促进自己的技术成长.文章记录自己的所思所想,以 ...
- 控制DIV属性——实现盒子长、宽、背景等变化
写在最前面:Demo的源起来自于http://js.fgm.cc/learn/,但是实现部分都是经过自己思考和优化的,有时会借助别人的图片,然而“窃喜”.如无特殊说明,demo都是经过ie6.ie7等 ...
- js练习-控制div属性
要开始练练js了,决定先按照Ferris大大的索引表一个个练,头一个就是控制div属性啦.看似挺简单的,不过平时jquery用惯了,用起来原生js还有点手生呢. 总之就是模仿加练习啦,先看看效果: 一 ...
- 第一课 1) 控制div属性 总结
点击按钮变换属性: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 控制div属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS控制div跳转到指定的位置的几种解决方案总结
原文:http://www.jb51.net/article/96574.htm 这篇文章主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考 ...
- JavaScript常用对象的方法和属性
---恢复内容开始--- 本文将简单介绍JavaScript中一些常用对象的属性和方法,以及几个有用的系统函数. 一.串方法 JavaScript有强大的串处理功能,有了这些串方法,才能编写出丰富多彩 ...
- arcgis for javascript之ArcGISDynamicMapServiceLayer图层控制的实现
图层控制是非常多GIS系统里面必须的一个小功能,本文就说说arcgis for javascript下ArcGISDynamicMapServiceLayer图层控制的实现方式.首先看图: 实现效果 ...
随机推荐
- 【javascript】javasrcipt设计模式之策略模式
策略模式支持在运行时由使用者选择合适的算法,对于使用者而言不用关心背后的具体事项,而使用者自动根据当前程序执行的上下文和配置,从已有的算法列表中选择出合适的算法来处理当前任务. 1.要解决的问题 2. ...
- MyEclipse 2017/2018 安装与破解 图文教程
SSM 框架-02-MyEclipse 2017/2018 安装与破解 现在在学J2EE,然后使用的工具就是 MyEclipse,现在就抛弃 Eclipse 了,我就不多说它俩的区别了,但是 MyEc ...
- sql 2000 无法连接远程数据库 sqlserver不存在或访问被拒绝、不能打开到主机的连接，在端口1433：连接失败等 解决方案
问题: sql 2000 无法连接远程数据库 sqlserver不存在或访问被拒绝 telnet 127.0.0.1 1433 提示:不能打开到主机的连接,在端口1433:连接失败 解决方案: ...
- Oracle 检查表的数据变动
本知识点仅适用于Oracle 9i以上的版本. 查看表的数据变动情况请使用SQL语句:select * from user_tab_modifications; user_tab_modificati ...
- Java实例---flappy-bird实例[最终版]
代码分析 解析版: Java实例---flappy-bird实例解析 完整版: TestBirdFly.java package testfly; import java.awt.Color; imp ...
- August 21st 2017 Week 34th Monday
In fact, the happiest fairy tale is no more than the simple days we have together. 其实全世界最幸福的童话,也比不上我 ...
- 使用Visual Studio Code编写和激活ABAP代码 (上)
猪年春节后的第一篇,Jerry祝各位猪年大吉! 2019年的六分之一马上就快过完了,不知道大家在新的一年是否给自己定了新的小目标呢?这里Jerry先预祝大家到2019年年底的时候,在年初制定的小目标都 ...
- iOS中 Proxy和的delegate区别
在ios中使用proxy代理模式,经常容易和delegate委托模式混淆. 委托模式(delegate),是简单的强大的模式,可让一个对象扮演另外对象的行为.委托对象保持到另外对象的引用,并在适当的时 ...
- PHP版本解密openrtb中的价格
Decrypt Price Confirmations 原文地址 https://developers.google.com/ad-exchange/rtb/response-guide/decryp ...
- 真实世界中的 Swift 性能优化
那么有什么因素会导致代码运行缓慢呢?当您在编写代码并选择架构的时候,深刻认识到这些架构所带来的影响是非常重要的.我将首先谈一谈:如何理解内联.动态调度与静态调度之间的权衡,以及相关结构是如何分配内存的 ...