01 使用JavaScript原生控制div属性
写在前面：
因对前端开发感兴趣，于是自学前端技术，现在已经会HTML、CSS、JavaScript基础技术。但水平处于小白阶段，在网上找一些小项目练练手，促进自己的技术成长。文章记录自己的所思所想，以及借鉴前端大牛的思路，谨个人想法，存在不足，欢迎指正。
项目介绍：
从最简单的开始，在网上找到了一个简单的用JS控制DIV属性的小项目，咋一看很简单，自己动手之后才发现自己的代码之冗余和初阶，深深汗颜。先写自己想法路程，然后把大牛源码奉上，涉及相关知识点一一记录。
项目效果图
整体思路，先变量保存属性，然后写方法复用，遍历数组，添加方法，对重置的元素用&&判断并使用cssText方法。
不多说，上源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制div的属性</title>
<style>
#outer {
width: 500px;
height: 500px;
margin: 100px auto 0;
padding: 0;
text-align: center;
border: 15px solid #FBB03B;
outline: 15px solid #709080;
border-radius: 1em;
}
h1 {
color: #FBB03B;
}
#div1 {
width: 100px;
height: 100px;
background: #F5F5D5;
margin: 10px auto;
display: block;
}
input {
border: 1px solid #FBB03B;
padding: 8px 20px;
color: #FBB03B;
background: #fff;
font-family: "微软雅黑";
outline: none;
cursor: pointer;
}
input:hover {
background: #FBB03B;
color: #fff;
}
</style>
<script>
// 创建改变样式的函数
var changeStyle = function(elem, attr, value) {
elem.style[attr] = value;
};
window.onload = function() {
// 获取每一个input标签
var oBtn = document.getElementsByTagName("input");
// 获取要改变的div盒子
var oDiv = document.getElementById("div1");
// 建立一个二维数组分别存放每个按钮要改变的属性和属性值
var oAtt = ["width", "height", "background", "display", "display"];
var oVal = ["300px", "300px", "#709080", "none", "block"];
// 遍历input标签
for(var i = 0; i < oBtn.length; i++) {
// 设置对应的index
oBtn[i].index = i;
// 绑定按钮点击事件
oBtn[i].onclick = function() {
// 重置按钮，清空之前的样式
this.index == oBtn.length - 1 && (oDiv.style.cssText = "");
// 调用changeStyle函数，当前按钮点击后，更改对应的样式
changeStyle(oDiv, oAtt[this.index], oVal[this.index]);
}
}
}
</script>
</head>
<body>
<div id="outer">
<h1>控制div属性</h1>
<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>
</html>
1. CSS样式：
实现多重边框，使用outline方案。
在某些情况下，你可能只需要两层边框，可以先设置一层常规边框，再加上outline(描边)属性来产生外层的边框。描边的好处在于，你可以通过outline-offset属性来控制它跟元素的边缘之间的间距，这个属性可以接受负值。
2. JavaScript方法：
cssText()定义和用法：
cssText 属性设置或返回作为字符串的样式声明的内容。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()的值；
&& 优先级高于 ||
console.log((1 && 3 || 0) && 4); // 结果4 ①
console.log(1 && 3 || 0 && 4); // 结果3 ②
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属性的更多相关文章
- 原生Javascript实现控制DIV属性
写在前面: 从事前端工作已有一年之久,因为工作的性质,不太涉及JS方面,所以自己的JS水平一直处于小白阶段,工作闲暇之余,在网上找了一些小项目,希望练练手,促进自己成长.这是第一篇,后续还会有很多记录 ...
- js练习-控制div属性
要开始练练js了,决定先按照Ferris大大的索引表一个个练,头一个就是控制div属性啦.看似挺简单的,不过平时jquery用惯了,用起来原生js还有点手生呢. 总之就是模仿加练习啦,先看看效果: 一 ...
- 控制DIV属性——实现盒子长、宽、背景等变化
写在最前面:Demo的源起来自于http://js.fgm.cc/learn/,但是实现部分都是经过自己思考和优化的,有时会借助别人的图片,然而“窃喜”.如无特殊说明,demo都是经过ie6.ie7等 ...
- 第一课 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/ ...
- 2016/01/19 javascript学习笔记-name属性
1. name属性只在少数html元素中有效:包括表单.表单元素.<iframe>和<img>元素. 基于name属性的值选取html元素,可以使用document对象的get ...
- JavaScript之控制标签属性
var pic=document.getElementById('pic'); var obtn=document.getElementById('btn'); console.log(pic.get ...
- JavaScript 原生控制元素添加删除
参考: https://blog.csdn.net/leijie0322/article/details/80664554 https://www.cnblogs.com/jpfss/p/910620 ...
- JavaScript动态设置div的样式的方法
有时候需要根据需要动态设置div的样式,当然对于稍有经验的javascript开发者来说,这一切都是那么的简单,但是对于初学者或者说没有相关经验的开发者来说可能就是一个不大不小的难关,下面就通过实例简 ...
随机推荐
- sql server中的 trimtrailingblanks
使用sp_help 查出 发现有个这个属性, 如何修改呢? SET ANSI_PADDING ONAlter Table Sys_users_History Alter column PveSit ...
- “全栈2019”Java第八十八章：接口中嵌套接口的应用场景
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- junit所需要的jar包
hamcrest-core-1.1.jar junit-4.12.jar http://central.maven.org/maven2/org/hamcrest/hamcrest-core/1.3/ ...
- 配置DNS服务器转发器
1.(windows server 2008 r2)控制面板->管理工具->服务器管理器->DNS->服务器图标->属性 2.转发器->编辑 3.填写DNS并点击确 ...
- centos7修改静态ip地址
今天逛园的时候突然发现这篇有关网络参数修改的文章写的很好,简单又使用,格式也很好的,所以就引用过来了. http://www.cnblogs.com/hongdada/p/6666932.html
- Linux中一些 不是很常用的配置修改
1,让虚拟机屏幕最大化 :查看-->自动调整大小-->自动适应客户机 2,让虚拟机取消屏保: system --> preferences --> Screensaver
- python-----读写操作
1. 文件的读取 注意:在windows中文件的路径是这样:C:\Users\name\mystuff .由于\u在python中表示转义如果使用此文件路径就会报错.解决方法: a.把斜杠\改为反斜杠 ...
- 酱油 Noip2018颓废记
也不知道写一些什么了 凑和着写写吧 最近十分的￥#&(^ --#%!*%￥^#$# Day -1 上午考了一场试 就\(TM\)考了60分 好不容易积攒起来的信心啊~~~~~~ 就这么垮了~~ ...
- WampServer访问出现403forbidden的问题解决
1,软件装上以后出现所有服务运行,80端口未被占用的情况下服务器一直处于离线状态 解决方案如下: 网络上面很多教程多说切换服务器为在线状态即可,但是我发现我的菜单里面并没有,用命令又嫌麻烦 在图表上面 ...
- 【性能测试】：解决loadrunner执行脚本启动慢的问题
解决方法更改.net安装目录中一个配置文件machine.config. 该文件位于.net安装目录下v2.0.50727\CONFIG(如C:\Windows\Microsoft.NET\Frame ...