写在前面：

　　从事前端工作已有一年之久，因为工作的性质，不太涉及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. php--常用的时间处理函数

    天地四方曰宇,往古来今曰宙 时间是世界的重要组成部分,不论花开花落,还是云卷云舒都有它的影子. 但它源起何处?又将去向何方?没人知道答案,也不需要答案,我们需要的只是一个相对的起点来标识时间,现今世界 ...

  2. HDOJ/HDU 2087 剪花布条(indexOf()应用~~)

    Problem Description 一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条,计算一下能从花布条中尽可能剪出几块小饰条来呢? Input 输入 ...

  3. 18. 4Sum

    #include <string>#include <stack>#include <vector>#include <map>#include < ...

  4. usaco 猜数游戏

    Description 为了提高智商,锻炼思维能力,奶牛设计了一个猜数游戏.游戏开始前,贝西会在牛棚后面摆上N个数字.所有数字排成一条直线,按次序从1到N编号.每个数字在1到10^9之间,没有两个数字 ...

  5. SOA技术的进化史

    SOA 是一种程序设计思想,其实早在远古时代(计算机史)它就已经出现了.无非就是把系统分解,将数据和业务逻辑部分尽量独立出来,然后以服务形式提供给另外的系统共用. 那时也有一些可以实现 SOA 的工具 ...

  6. linux内核--几个上下文(context)

    为了控制进程的执行,内核必须有能力挂起正在CPU上运行的进程,并恢复以前挂起的某个进程的执行,这种行为叫进程切换(process switch),任务切换(task switch)或上下文切换(con ...

  7. IntelliJ IDEA 配置Jetty

    jetty是google app engine 在大量使用的一款服务器软件,不过当然目前还撼动不了tomcat的地位,但是jetty相当轻量级,可以自己灵活定制 资源占用少 ,所以还是有吸引力的,接下 ...

  8. jdk的动态代理

    至于jdk的动态代理怎么用此处并不多说,现在是更深一步的理解,jdk的Proxy类到底做了什么. Proxy.newProxyInstance可以生成代理类,此方法有三个参数(ClassLoader ...

  9. Nothing

    破烂的文具盒里,一张十年的纸条子和一袋存了十年的德芙巧克力 浅绿色的纸条子上写是当时你给我抄的作业题目,蓝色清秀的字体 但是十年后,你却已嫁他人 将身后的风雪.夕阳,空气埋葬.窑藏,待非常多年以后酿成 ...

  10. android.util.Log说明和android 像素说明

    1. android.util.Log常用的方法有以下5个:Log.v() Log.d() Log.i() Log.w() 以及 Log.e() .根据首字母对应VERBOSE,DEBUG,INFO, ...