写在前面：

因对前端开发感兴趣，于是自学前端技术，现在已经会HTML、CSS、JavaScript基础技术。但水平处于小白阶段，在网上找一些小项目练练手，促进自己的技术成长。文章记录自己的所思所想，以及借鉴前端大牛的思路，谨个人想法，存在不足，欢迎指正。

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

项目效果图

java如何修改div的属性 js修改div属性_java如何修改div的属性

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制div的属性</title>
    <style>
        #outer {
            width: 500px;
            height: 500px;
            margin: 100px auto 0;
            padding: 0;
            text-align: center;
            border: 15px solid #FBB03B;
            outline: 15px solid #709080;
            border-radius: 1em;
        }

        h1 {
            color: #FBB03B;
        }

        #div1 {
            width: 100px;
            height: 100px;
            background: #F5F5D5;
            margin: 10px auto;
            display: block;
        }

        input {
            border: 1px solid #FBB03B;
            padding: 8px 20px;
            color: #FBB03B;
            background: #fff;
            font-family: "微软雅黑";
            outline: none;
            cursor: pointer;
        }

        input:hover {
            background: #FBB03B;
            color: #fff;
        }
    </style>
    <script>
        // 创建改变样式的函数
        var changeStyle = function(elem, attr, value) {
            elem.style[attr] = value;
        };

        window.onload = function() {
            // 获取每一个input标签
            var oBtn = document.getElementsByTagName("input");

            // 获取要改变的div盒子
            var oDiv = document.getElementById("div1");

            // 建立一个二维数组分别存放每个按钮要改变的属性和属性值
            var oAtt = ["width", "height", "background", "display", "display"];
            var oVal = ["300px", "300px", "#709080", "none", "block"];

            // 遍历input标签
            for(var i = 0; i < oBtn.length; i++) {

                // 设置对应的index
                oBtn[i].index = i;

                // 绑定按钮点击事件
                oBtn[i].onclick = function() {

                    // 重置按钮，清空之前的样式
                    this.index == oBtn.length - 1 && (oDiv.style.cssText = "");

                    // 调用changeStyle函数，当前按钮点击后，更改对应的样式
                    changeStyle(oDiv, oAtt[this.index], oVal[this.index]);
                }
            }
        }   
    </script>
</head>
<body>
    <div id="outer">
        <h1>控制div属性</h1>
        <input type="button" value="变宽">
        <input type="button" value="变高">
        <input type="button" value="变色">
        <input type="button" value="隐藏">
        <input type="button" value="重置">
        <div id="div1"></div>
    </div>
</body>
</html>

1. CSS样式：

实现多重边框，使用outline方案。
在某些情况下，你可能只需要两层边框，可以先设置一层常规边框，再加上outline(描边)属性来产生外层的边框。描边的好处在于，你可以通过outline-offset属性来控制它跟元素的边缘之间的间距，这个属性可以接受负值。

2. JavaScript方法：

  1. cssText()定义和用法：
    cssText 属性设置或返回作为字符串的样式声明的内容。
  2. this.index==oBtn.length-1 &&(oDiv.style.cssText="");
    是指前半句this.index==oBtn.length-1为true时，执行下半句,也就是当遍历到重置按钮时，先清除之前添加的样式

tips:&&和||在javascript中的另类用法

a() && b() :如果执行a()后返回true，则执行b()并返回b的值；如果执行a()后返回false，则整个表达式返回a()的值，b()不执行；

a() || b() :如果执行a()后返回true，则整个表达式返回a()的值，b()不执行；如果执行a()后返回false，则执行b()并返回b()的值；

&& 优先级高于 ||

console.log((1 && 3 || 0) && 4);     // 结果4 ①
console.log(1 && 3 || 0 && 4);      // 结果3 ②
console.log(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。

总结：

这算是最最基础的js练习了，模仿过一遍熟悉了通过js控制css样式改变（不要太懒了，变量名都抄原作的……下次不这样了，囧）。