快捷導(dǎo)航

JavaScript練習(xí)小項目之修改div塊的顏色

更新時間：2023年01月28日 09:56:26 作者：靜Yu

這篇文章主要給大家介紹了關(guān)于JavaScript練習(xí)小項目之修改div塊的顏色的相關(guān)資料,文中通過舉例介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

什么是JavaScript？

一開始的網(wǎng)頁就是單純的靜態(tài)網(wǎng)頁，為了使用戶能與網(wǎng)頁交互，設(shè)計出了JavaScript語言。JavaScript語言就是一種可以用來給網(wǎng)頁添加交互性的·語言。我們平時聽到對JavaScript的描述一般是這是一門腳本語言。腳本語言就是在瀏覽器執(zhí)行的一種語言，是一段程序并不是軟件。腳本語言可以添加到使用html和css構(gòu)建的網(wǎng)站中，在網(wǎng)頁加載時會自動執(zhí)行，并實現(xiàn)各種頁面的動態(tài)效果，在頁面交互起到重要的作用。

實現(xiàn)目標

點擊按鈕將黑色的四個小方塊變成紅色，再次點擊將紅色的變成黑色

實現(xiàn)代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        button{
            display: block;
            margin: 0 auto;
        }
       
        #container{
            width: 330px;
            margin: 10px auto;
        }
        #container div{
            width: 100px;
            height: 100px;
            margin: 0 5px;
            background-color: black;
            display: inline-block;
        }
    </style>
</head>
<body>
<button onclick="cli()">將黑色div變成紅色</button><br>
<div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<script>
    // 先獲取div的子節(jié)點
    var divs=document.getElementById("container").children;
    //獲取按鈕
    var btn=document.getElementsByTagName("button")[0];
    //點擊事件的方法
   function cli()
    {
        if (btn.innerHTML === '將黑色div變成紅色'){
                for (var i = 0; i < 4; i++) {
                    divs[i].style.backgroundColor = "red";
                }
            btn.innerHTML = "將紅色div變成黑色";
        }
        else {
            for (var i = 0; i < 4; i++) {
                divs[i].style.backgroundColor = "black";
            }
            btn.innerHTML = "將黑色div變成紅色";
        }
    }
</script>
</body>
</html>