写在前面：

因对前端开发感兴趣，于是自学前端技术，现在已经会HTML、CSS、JavaScript基础技术。但水平处于小白阶段，在网上找一些小项目练练手，促进自己的技术成长。文章记录自己的所思所想，以及借鉴前端大牛的思路，谨个人想法，存在不足，欢迎指正。

项目介绍：

　　从最简单的开始，在网上找到了一个简单的用JS控制DIV属性的小项目，咋一看很简单，自己动手之后才发现自己的代码之冗余和初阶，深深汗颜。先写自己想法路程，然后把大牛源码奉上，涉及相关知识点一一记录。

项目效果图

整体思路，先变量保存属性，然后写方法复用，遍历数组，添加方法，对重置的元素用&&判断并使用cssText方法。

不多说，上源码：


  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. 	<meta charset="UTF-8">
  6. 	<title>控制div的属性</title>
  7. 	<style>
  8. 		#outer {
  9. 			width: 500px;
  10. 			height: 500px;
  11. 			margin: 100px auto 0;
  12. 			padding: 0;
  13. 			text-align: center;
  14. 			border: 15px solid #FBB03B;
  15. 			outline: 15px solid #709080;
  16. 			border-radius: 1em;
  17. 		}
  19. 		h1 {
  20. 			color: #FBB03B;
  21. 		}
  23. 		#div1 {
  24. 			width: 100px;
  25. 			height: 100px;
  26. 			background: #F5F5D5;
  27. 			margin: 10px auto;
  28. 			display: block;
  29. 		}
  31. 		input {
  32. 			border: 1px solid #FBB03B;
  33. 			padding: 8px 20px;
  34. 			color: #FBB03B;
  35. 			background: #fff;
  36. 			font-family: "微软雅黑";
  37. 			outline: none;
  38. 			cursor: pointer;
  39. 		}
  41. 		input:hover {
  42. 			background: #FBB03B;
  43. 			color: #fff;
  44. 		}
  45. 	</style>
  46. 	<script>
  47. 		// 创建改变样式的函数
  48. 		var changeStyle = function(elem, attr, value) {
  49. 			elem.style[attr] = value;
  50. 		};
  52. 		window.onload = function() {
  53. 			// 获取每一个input标签
  54. 			var oBtn = document.getElementsByTagName("input");
  56. 			// 获取要改变的div盒子
  57. 			var oDiv = document.getElementById("div1");
  59. 			// 建立一个二维数组分别存放每个按钮要改变的属性和属性值
  60. 			var oAtt = ["width", "height", "background", "display", "display"];
  61. 			var oVal = ["300px", "300px", "#709080", "none", "block"];
  63. 			// 遍历input标签
  64. 			for(var i = 0; i < oBtn.length; i++) {
  66. 				// 设置对应的index
  67. 				oBtn[i].index = i;
  69. 				// 绑定按钮点击事件
  70. 				oBtn[i].onclick = function() {
  72. 					// 重置按钮，清空之前的样式
  73. 					this.index == oBtn.length - 1 && (oDiv.style.cssText = "");
  75. 					// 调用changeStyle函数，当前按钮点击后，更改对应的样式
  76. 					changeStyle(oDiv, oAtt[this.index], oVal[this.index]);
  77. 				}
  78. 			}
  79. 		}
  80. 	</script>
  81. </head>
  82. <body>
  83. 	<div id="outer">
  84. 		<h1>控制div属性</h1>
  85. 		<input type="button" value="变宽">
  86. 		<input type="button" value="变高">
  87. 		<input type="button" value="变色">
  88. 		<input type="button" value="隐藏">
  89. 		<input type="button" value="重置">
  90. 		<div id="div1"></div>
  91. 	</div>
  92. </body>
  93. </html>

1. CSS样式：

实现多重边框，使用outline方案。

在某些情况下，你可能只需要两层边框，可以先设置一层常规边框，再加上outline(描边)属性来产生外层的边框。描边的好处在于，你可以通过outline-offset属性来控制它跟元素的边缘之间的间距，这个属性可以接受负值。

2. JavaScript方法：

  1. cssText()定义和用法：

    cssText 属性设置或返回作为字符串的样式声明的内容。

  2. this.indexoBtn.length-1 &&(oDiv.style.cssText="");

    是指前半句this.indexoBtn.length-1为true时，执行下半句,也就是当遍历到重置按钮时，先清除之前添加的样式

tips:&&和||在javascript中的另类用法

a() && b() :如果执行a()后返回true，则执行b()并返回b的值；如果执行a()后返回false，则整个表达式返回a()的值，b()不执行；

a() || b() :如果执行a()后返回true，则整个表达式返回a()的值，b()不执行；如果执行a()后返回false，则执行b()并返回b()的值；

&& 优先级高于 ||


  2. console.log((1 && 3 || 0) && 4); 	 // 结果4 ①
  3. console.log(1 && 3 || 0 && 4);		// 结果3 ②
  4. console.log(0 && 3 || 1 && 4);		// 结果4 ③

分析

语句①：1&&3 返回3 => 3 || 0 返回 3 => 3&&4 返回 4

语句②：先执行1&&3 返回3，在执行0&&4返回0，最后执行结果比较 3||0 返回 3

语句③：先执行0&&3 返回0，在执行1&&4返回4，最后执行结果比较 0||4 返回 4

注：非0的整数都为true，undefined、null和空字符串”" 为false。

总结：

这算是最最基础的js练习了，模仿过一遍熟悉了通过js控制css样式改变（不要太懒了，变量名都抄原作的……下次不这样了，囧）。

01 使用JavaScript原生控制div属性的更多相关文章

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

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

  2. js练习-控制div属性

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

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

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

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

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

  5. 控制div属性

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

  6. 2016/01/19 javascript学习笔记-name属性

    1. name属性只在少数html元素中有效:包括表单.表单元素.<iframe>和<img>元素. 基于name属性的值选取html元素,可以使用document对象的get ...

  7. JavaScript之控制标签属性

    var pic=document.getElementById('pic'); var obtn=document.getElementById('btn'); console.log(pic.get ...

  8. JavaScript 原生控制元素添加删除

    参考: https://blog.csdn.net/leijie0322/article/details/80664554 https://www.cnblogs.com/jpfss/p/910620 ...

  9. JavaScript动态设置div的样式的方法

    有时候需要根据需要动态设置div的样式,当然对于稍有经验的javascript开发者来说,这一切都是那么的简单,但是对于初学者或者说没有相关经验的开发者来说可能就是一个不大不小的难关,下面就通过实例简 ...

随机推荐

  1. 洛谷P4586 [FJOI2015]最小覆盖双圆问题（最小圆覆盖）

    题面 传送门 前置芝士 最小圆覆盖 题解 我们按照\(x\)坐标排序,然后二分中间点,把点分成左右两边,对两边都做一个最小圆覆盖,那么半径大一点的那个就是答案了.然后对半径大的那一边继续二分就行了 然 ...

  2. Display all 2232 possibilities? (y or n)

    Linux下我在没输入任何命令的情况下摁了两下tab键,然后就出现了这个提示:Display all 2232 possibilities? (y or n) 我觉得摁y的话就会显示所有的现阶段命令. ...

  3. ElasticSearch.net NEST批量创建修改删除索引完整示例

    本示例采用Elasticsearch+Nest 网上查了很多资料,发现用C#调用Elasticsearch搜索引擎的功能代码很分散,功能不完整,多半是非常简单的操作,没有成型的应用示例.比如新增或修改 ...

  4. [java实现]常见算法之字符串操作

    一.字符串反转 把一个句子中的打次进行反转,比如“how are you” ,变为 “you are how” // 字符串反转 public class StringTest { // 字符反转的方 ...

  5. leetcode-6-Z字形变换

    题目描述:  将字符串 "PAYPALISHIRING" 以Z字形排列成给定的行数: P A H N A P L S I I G Y I R 之后从左往右,逐行读取字符:" ...

  6. Matplotlib的初次使用

    # -*- coding: utf-8 -*-#先画一个线性图 import numpy as np import matplotlib.pyplot as plt x=[0,1] y=[0,1] p ...

  7. 基础概念——理解IP地址和域名

    从程序员角度,可以把因特网看做是世界范围内的主机集合: 1)主机集合被映射为一组32位的IP地址. 2)这个IP地址被映射为一组称为因特网域名的标识符. 3)因特网主机上的进程能够通过连接和任何其他因 ...

  8. BZOJ3168. [HEOI2013]钙铁锌硒维生素（线性代数＋二分图匹配）

    题目链接 https://www.lydsy.com/JudgeOnline/problem.php?id=3168 题解 首先,我们需要求出对于任意的 \(i, j(1 \leq i, j \leq ...

  9. HBase 使用外部的 zookeeper

    HBase 启动时,默认会根据hbase-site.xml文件中的如下设置端口上启动一个zookeeper服务: <property> <name>hbase.zookeepe ...

  10. Mac下关闭Sublime Text 3的更新检查

    操作如下: 注意:update_check的属性前后都要有一个逗号. , "update_check":false, 然后还需要一步,就是注册破解,在[Help]->[Ent ...