写在前面：

　　从事前端工作已有一年之久，因为工作的性质，不太涉及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. bzoj 1876 [SDOI2009]SuperGCD（高精度+更相减损）

    1876: [SDOI2009]SuperGCD Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 2384  Solved: 806[Submit][Sta ...

  2. bzoj 2618 2618: [Cqoi2006]凸多边形（半平面交）

    2618: [Cqoi2006]凸多边形 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 656  Solved: 340[Submit][Status] ...

  3. bzoj 2829 信用卡凸包（凸包）

    2829: 信用卡凸包 Time Limit: 10 Sec  Memory Limit: 128 MB Submit: 1342  Solved: 577 [Submit][Status][Disc ...

  4. HDU 4786 Fibonacci Tree （2013成都1006题） 最小生成树+斐波那契

    题意:问生成树里能不能有符合菲波那切数的白边数量 思路:白边 黑边各优先排序求最小生成树,并统计白边在两种情况下数目,最后判断这个区间就可以.注意最初不连通就不行. #include <stdi ...

  5. 蔡勒(Zeller)公式

    蔡勒(Zeller)公式,是一个计算星期的公式,随便给一个日期,就能用这个公式推算出是星期几. W =[ [c/4] - 2c + y + [y/4] + [13 * (m+1) / 5] + d - ...

  6. 个人推荐，比较好的MySQL客户端工具

    关于啊,MySQL客户端,实在是太多了.本人也是正在摸索中. MySQL Workbench phpMyAdmin SQLyog Navicat for MySQL MySQL Server MySQ ...

  7. 1 weekend110的hdfs源码跟踪之打开输入流 + hdfs源码跟踪之打开输入流总结

    3种形式的元数据,fsimage是在磁盘上,meta.data是在内存上, 我们继续,前面呢,断点是打在这一行代码处, FileSystem fs = FileSystem.get(conf); we ...

  8. Spring实例化bean的三种方法

    1.用构造器来实例化 <bean id="hello2" class="com.hsit.hello.impl.ENhello" /> 2.使用静态 ...

  9. 微信开发第4章 通过accesstoken获取用户标签管理

    通过access_token获取用户标签管理: 1.获取标签列表 调用接口为: http请求方式:GET(请使用https协议) https://api.weixin.qq.com/cgi-bin/t ...

  10. Java-工厂设计模式

    引言: 工厂设计模式分为三种: 简单工厂 工厂方法 抽象工厂 联想四种情况 (1).还没有工厂时代:假如还没有工业革命,如果一个客户要一件产品,一般的做法是客户去创建一件产品,然后拿来用. (2).简 ...