01 使用JavaScript原生控制div屬性

時間 2019-12-09

標籤使用 javascript 原生控制 div 屬性欄目 JavaScript 简体版

原文原文鏈接

寫在前面：

因對前端開發感興趣，因而自學前端技術，如今已經會HTML、CSS、JavaScript基礎技術。但水平處於小白階段，在網上找一些小項目練練手，促進本身的技術成長。文章記錄本身的所思所想，以及借鑑前端大牛的思路，謹我的想法，存在不足，歡迎指正。javascript

項目介紹：
　　從最簡單的開始，在網上找到了一個簡單的用JS控制DIV屬性的小項目，咋一看很簡單，本身動手以後才發現本身的代碼之冗餘和初階，深深汗顏。先寫本身想法路程，而後把大牛源碼奉上，涉及相關知識點一一記錄。css

項目效果圖html

總體思路，先變量保存屬性，而後寫方法複用，遍歷數組，添加方法，對重置的元素用&&判斷並使用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樣式：java

實現多重邊框，使用outline方案。
在某些狀況下，你可能只須要兩層邊框，能夠先設置一層常規邊框，再加上outline(描邊)屬性來產生外層的邊框。描邊的好處在於，你能夠經過outline-offset屬性來控制它跟元素的邊緣之間的間距，這個屬性能夠接受負值。數組

2. JavaScript方法：函數

cssText()定義和用法：
cssText 屬性設置或返回做爲字符串的樣式聲明的內容。this
this.index==oBtn.length-1 &&(oDiv.style.cssText="");
是指前半句this.index==oBtn.length-1爲true時，執行下半句,也就是當遍歷到重置按鈕時，先清除以前添加的樣式code

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

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樣式改變（不要太懶了，變量名都抄原做的……下次不這樣了，囧）。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。