题目

要实现的效果如图所示：查看演示

分析

乍一看还以为十分简单，就是简单的点击button时触发的函数来改变样式值，不过做到后面就开始打脸了——“重置”功能。其实要实现重置功能，硬做还是可以的，就是cssText=“整个style表”，但是这么做太暴力了，十分不优雅，结果看了人家的源码真的是佩服的五体投地。

首先注意CSS的三种创建方式
  • 内联样式/行内样式(inline style)
  • 内部样式表(internal style sheet)
  • 外部样式表(external style sheet)
JS如何获取CSS样式

  1. 获取内联样式

    <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']。

  2. 获取外联样式（内部/外部样式表）（待更新）

也就是说，一般情况下，我们都只能访问和设置行内样式！访问外联样式需要其他方法实现。

cssText的用法

用来设置行内样式。

ele.style.cssText="CSS样式表";//添加行内样式

ele.style.cssText="";//可以清除行内样式

这次的小练习中用到了ele.style.cssText=""的用法来实现重置功能，这条语句只会清除行内样式，对样式表中设置的内容没有改动。

window.onload的使用方法

window.onload加载事件在页面内容加载完成之后立即执行相应的函数。

使用方法：



onclick有相同用法：

  1. obj.onclick = function() {//function body//}
  2. 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>

总结

这一次的小练习提升的知识点：

  1. 使用对象/数组遍历访问的思想；
  2. cssText用法，内联样式的访问和设置；
  3. && 和 || 的特殊用法；
  4. window.onload=function(){};
  5. this初步了解；
  6. 闭包和作用域的初步接触；

JavaScript小练习1-控制div属性的更多相关文章

  1. 原生Javascript实现控制DIV属性

    写在前面: 从事前端工作已有一年之久,因为工作的性质,不太涉及JS方面,所以自己的JS水平一直处于小白阶段,工作闲暇之余,在网上找了一些小项目,希望练练手,促进自己成长.这是第一篇,后续还会有很多记录 ...

  2. 01 使用JavaScript原生控制div属性

    写在前面: 因对前端开发感兴趣,于是自学前端技术,现在已经会HTML.CSS.JavaScript基础技术.但水平处于小白阶段,在网上找一些小项目练练手,促进自己的技术成长.文章记录自己的所思所想,以 ...

  3. 控制DIV属性——实现盒子长、宽、背景等变化

    写在最前面:Demo的源起来自于http://js.fgm.cc/learn/,但是实现部分都是经过自己思考和优化的,有时会借助别人的图片,然而“窃喜”.如无特殊说明,demo都是经过ie6.ie7等 ...

  4. js练习-控制div属性

    要开始练练js了,决定先按照Ferris大大的索引表一个个练,头一个就是控制div属性啦.看似挺简单的,不过平时jquery用惯了,用起来原生js还有点手生呢. 总之就是模仿加练习啦,先看看效果: 一 ...

  5. 第一课 1) 控制div属性 总结

    点击按钮变换属性: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. 控制div属性

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. JS控制div跳转到指定的位置的几种解决方案总结

    原文:http://www.jb51.net/article/96574.htm 这篇文章主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考 ...

  8. JavaScript常用对象的方法和属性

    ---恢复内容开始--- 本文将简单介绍JavaScript中一些常用对象的属性和方法,以及几个有用的系统函数. 一.串方法 JavaScript有强大的串处理功能,有了这些串方法,才能编写出丰富多彩 ...

  9. arcgis for javascript之ArcGISDynamicMapServiceLayer图层控制的实现

    图层控制是非常多GIS系统里面必须的一个小功能,本文就说说arcgis for javascript下ArcGISDynamicMapServiceLayer图层控制的实现方式.首先看图: 实现效果 ...

随机推荐

  1. 【vue】混合模式

    因为工作的分配,写财务的对账部分,因为3个页面的设计和功能基本相同,都是查询筛选表格,所以用混合模式优化了部分代码.用混合把一些共用的东西抽离了出来. 具体使用方法参照文档. https://cn.v ...

  2. OSMC Vs. OpenELEC Vs. LibreELEC – Kodi Operating System Comparison

    Kodi's two slim-and-trim kid brothers LibreELEC and OpenELEC were once great solutions for getting t ...

  3. 安卓app开发-01-开发工具及环境配置

    安卓app开发-01-开发工具及环境配置 请大家根据推荐指数和自己的意愿选择 使用 Android Studio 1.可以使用 Android Studio 下载地址:http://www.andro ...

  4. 使用ajax请求数据时的几种做法

    在进行前后端交互的时候,一般前端使用ajax向后端发送数据,后端根据发送的数据来返回数据,前端将这些数据接收并进行相应的处理 以下是在日常工作中总结的几点使用ajax传递数据时的情况: 1.在本页面( ...

  5. c# datarow[] 转换成 datatable， List<T> 转datatable

      c# datarow[] 转换成 datatable, List<T> 转datatable DdataRow[]转成Datatable private DataTable ToDat ...

  6. Mac系统完美配置Cocos2d-x 2.2.3 的Android+IOS双平台环境

    注意:本文的Cocos2d-x的版本是2.2.3,更高版本可能会略有不同,低版本者不建议参考 首先需要配置XCODE环境 下载Cocos2d-x 然后下载Cocos2d-x的整个源码:http://w ...

  7. FTP列出文件列表

    #定义FTP服务器地址$ftpURL = "ftp://192.168.12.6/"#定义登录FTP服务器的账户及密码$username = "testj\adadmin ...

  8. Exchange 2007 前端 IIS 内存占用过高

    已经碰见了好几次,在Exchange2007的场景中,前端角色所在服务器的w3wp.exe进程总是占用大量内存,以至于触发反压组件,停止了正常的邮件流投递,造成业务中断. 终于下决心查一下到底问题问题 ...

  9. python面向对象之类成员

    面向对象编程: OOP编程是利用类和对象来创建各种模型来实现对真实世界的描述,使用面向对象编程的原因一方面是因为它可以使程序的维护和扩展变得简单,并可以大大提高程序开发效率.另外,基于面向对象的程序可 ...

  10. 从Vue-router到html5的pushState

    最近在用vue的时候突然想到一个问题 首先,我们知道vue实现的单页应用中一般不会去刷新页面,因为刷新之后页面中的vuex数据就不见了. 其次,我们也知道一般情况下,url变更的时候,比如指定loca ...