写在前面：

　　从事前端工作已有一年之久，因为工作的性质，不太涉及JS方面，所以自己的JS水平一直处于小白阶段，工作闲暇之余，在网上找了一些小项目，希望练练手，促进自己成长。这是第一篇，后续还会有很多记录自己慢慢走过来的路程，文章纯属记录自己的所思所想，谨个人想法，存在不足，欢迎指正。

项目介绍：

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

项目截图：

刚看到项目时本以为就是简单的熟悉一下如何获取元素属性，写了之后发现大量的重复内容，看了源码之后才发现自己思维上的局限和自己代码的差劲- -。

不多说，上代码。

<!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>

以上实现代码涉及知识点于我而言两个部分，第一是属性用数组表示，并便利获取的思维方法，第二个就是&& 的用法，因为之前孤陋寡闻，从未接触过这个用法，查了资料后才明白。以下引用一段网上找到的解释&&和||在javascript中的另类用法：

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 ③

　　

分析：
语句①：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。

第三点就是关于cssText的运用：

var head= document.getElementById("head");

head.style.cssText="width:200px;height:70px;display:bolck";

和innerHTML一样，cssText很快捷且所有浏览器都支持。此外当批量操作样式时，cssText只需一次reflow。

但cssText也有个缺点，会覆盖之前的样式。使用该方法在IE9/Firefox/Safari/Chrome/Opera中没什么问题，但由于 IE6/7/8会少分号，所以如果需要兼容IE6/7/8的话，可以写个方法：

function setStyle(el, strCss){

    function endsWith(str, suffix) {

        var l = str.length - suffix.length;

        return l >= 0 && str.indexOf(suffix, l) == l;

    }

    var sty = el.style,

        cssText = sty.cssText;

    if(!endsWith(cssText, ';')){

        cssText += ';';

    }

    sty.cssText = cssText + strCss;

}

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

感谢阅读，由于技术水平有限，内容大部分来自网络。

原生Javascript实现控制DIV属性的更多相关文章

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

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

  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. JavaScript之控制标签属性

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

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

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

  8. C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法

    C#构造方法(函数)   一.概括 1.通常创建一个对象的方法如图: 通过  Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...

  9. 键盘控制div移动并且解决停顿问题（原生js）

    <html> <head> <title>键盘控制div移动,解决停顿问题</title> <meta charset="utf-8&q ...

随机推荐

  1. 同时连接多台Android设备进行Monkey Test

    事情多了就会乱,时间久了就会忘. adb -s remount id(devices ID) adb -s shell id monkey -p package name -v count

  2. [App]Taste VS2015 && Android Studio

    逆水飞 尝试进行各种Android开发工具的安装以及大致流程对比 几个疑惑的地方 1)根据SDK的描述,应该是一个新版本的推出就有对应的包里面包含多个文件那么对于:SDK Platform.APIs. ...

  3. js 打印网页指定内容

    function doPrint() { setTimeout(function() { bdhtml=window.document.body.innerHTML; sprnstr="&l ...

  4. 基于TCP协议的客户端

    基于TCP协议的客户端 此客户端能用于下一篇博客的单线程服务器和多线程服务器 import java.io.BufferedReader; import java.io.IOException; im ...

  5. 三个数从小到大排序—南阳acm

    问题描述: 现在要写一个程序,实现给三个数排序的功能     输入        输入三个正整数    输出       给输入的三个正整数排序       样例输入 20 7 33      样例输 ...

  6. 如何实例化i2c_client（四法）

    一.在板文件进行client的实例化 在内核的初始化中(例如在板文件中)定义设备的信息.这种操作的前提是内核编译的时候已经确定有哪些i2c设备和它们的地址,还要知道连接的总线的编号. 比如在板文件/a ...

  7. C标准库简单解读

    1,程序运行时动态链接共享库; libc(character),libm(math),使用标准库的函数; eg:stdlib.h exit(); size_t数据类型,NULL空指针在头文件stdde ...

  8. Java和Tomcat类加载机制

    转自:http://blog.csdn.net/codolio/article/details/5027423 加载类是运行程序的基础,了解Java和Tomcat的类加载机制对更有效地开发.调试Web ...

  9. Linux主机安全配置的几个脚本【转载】

    标签:linux Linux主机安全配置的几个脚本 职场 休闲原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://hx100.blog ...

  10. EasyUI-增删改操作

    最近公司要用easyui,这里自己看了官网几篇文章,遇到些问题,大多数的问题都是敲代码的时候笔误,其他有些地方确实需要注意一下,这里做些笔记. 1.在mysql中建好表之后修改id字段为递增字段,发现 ...