写在前面：

　　从事前端工作已有一年之久，因为工作的性质，不太涉及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. HDU-2523 SORT AGAIN

    http://acm.hdu.edu.cn/showproblem.php?pid=2523 学习哈希和注意i++,后要--i: SORT AGAIN Time Limit: 2000/1000 MS ...

  2. HTML5 Canvas核心技术—图形、动画与游戏开发.pdf2

    事件处理: HTML5应用程序是以事件来驱动的,可以在canvas中增加一个事件监听器,当事件发生时,浏览器就会调用这个监听器 //方法一canvas.onmousedown=function(e){ ...

  3. .net 加水印 图片变大很多 解决方法

    /// 给图片加水印 中国红木网          /// </summary>         /// <param name="originalImg"> ...

  4. “互联网+”引发IT人才招工荒-新华网安徽频道

    "互联网+"引发IT人才招工荒-新华网安徽频道 "互联网+"引发IT人才招工荒

  5. yii 中设置提示成功信息，错误提示信息，警告信息

    方法一: <?php Yii::app()->user->setFlash(‘success’,”Data saved!”); 设置键值名为success的临时信息.在getFlas ...

  6. MongoDB log4j 日志整合

    在分布式系统当中,这些服务可能分别部署在不同的服务器上,并且有各自的日志输出.为了方便对这些日志进行统一管理和分析.我们可以将日志统一输出到指定的数据库系统中,而再由日志分析系统去管理.而这个储存日志 ...

  7. Java NIO使用及原理分析（二）

    在第一篇中,我们介绍了NIO中的两个核心对象:缓冲区和通道,在谈到缓冲区时,我们说缓冲区对象本质上是一个数组,但它其实是一个特殊的数组,缓冲区对象内置了一些机制,能够跟踪和记录缓冲区的状态变化情况,如 ...

  8. sed和awk最佳入门教程

    文档<sed和awk最佳入门教程>——摘自<实战linux shell编程与服务器管理>,简单易懂,适合初学者. 下载地址:http://download.csdn.net/d ...

  9. 保持Service不被Kill掉的方法--双Service守护 && Android实现双进程守护

    本文分为两个部分,第一部分为双Service守护,第二部分为双进程守护 第一部分: 一.Service简介:Java.lang.Object ↳Android.content.Context  ↳an ...

  10. mybatis01

    mybatis是一个java持久层框架,java中操作关系型 数据库用的是jdbc,mybatis是对jdbc的一个封装. jdk1..0_72 eclipse:eclipse-3.7-indigo ...