写在前面：

　　从事前端工作已有一年之久，因为工作的性质，不太涉及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. ORACLE与.NET类型对应关系（转）

    ORACLE与.NET类型对应关系 想来这个是最重要的事情了,因为多数情况下,我们使用dbhelper来调用数据库的时候,是因为如下三个地方导致错误: 1.错误的sql语句:末尾多了分号,少了部分关键 ...

  2. c# const与readonly 关键字的比较

    C#中,const 与readonly是两个比较有用的关键字.const 与 readonly 定义的数据成员在初始化都不能再改变. 比如定义了 public class MathUtitlity   ...

  3. HDOJ 1004题 Let the Balloon Rise strcmp()函数

    Problem Description Contest time again! How excited it is to see balloons floating around. But to te ...

  4. Tomcat启动失败闪退

    最近把电脑系统从win8升到了8.1(之前源于各种原因都没升外带升级失败),用都用了1个月了,突然发现tomcat启动不了,提示找不到什么什么- -,因为平时基本都是从开发工具里运行的服务器,都没有问 ...

  5. bayer图像格式

    Bayer数据,其一般格式为:奇数扫描行输出 RGRG……偶数扫描行输出 GBGB…… 根据人眼对彩色的响应带宽不高的大面积着色特点,每个像素没有必要同时输出3种颜色.因此,数据采样时, 奇数扫描行的 ...

  6. Shell简介：什么是Shell，Shell命令的两种执行方式

    Shell本身是一个用C语言编写的程序,它是用户使用Unix/Linux的桥梁,用户的大部分工作都是通过Shell完成的.Shell既是一种命令语言,又是一种程序设计语言.作为命令语言,它交互式地解释 ...

  7. CSS围住浮动元素的三种方法

    浮动元素脱离了文档流,其父元素看不到它了,因而不会包围它.浮动会“扩散”到下一个清除浮动的元素处.这会引起不想要的页面布局效果. 清除浮动的方法有三种: 1.父元素overflow:hidden 2. ...

  8. Hadoop版Helloworld之wordcount运行示例

    1.编写一个统计单词数量的java程序,并命名为wordcount.java,代码如下: import java.io.IOException; import java.util.StringToke ...

  9. Linux 上不可修改的文件和目录

         有时候我们需要让一个我们自己的目录中的内容不能变动,也就是不允许其他人随便删改我们的目录和目录中的文件.这里,首先,我们需要知道两个概念,文件的粘滞位和属性.       文件如果设置了粘滞 ...

  10. Linux中查看系统资源占用情况的命令【转载】

      用 'top -i' 看看有多少进程处于 Running 状态,可能系统存在内存或 I/O 瓶颈,用 free 看看系统内存使用情况,swap 是否被占用很多,用 iostat 看看 I/O 负载 ...