快捷導(dǎo)航

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

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

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

什么是JavaScript？

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

實(shí)現(xiàn)目標(biāo)

點(diǎn)擊按鈕將黑色的四個(gè)小方塊變成紅色，再次點(diǎn)擊將紅色的變成黑色

實(shí)現(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é)點(diǎn)
    var divs=document.getElementById("container").children;
    //獲取按鈕
    var btn=document.getElementsByTagName("button")[0];
    //點(diǎn)擊事件的方法
   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>

實(shí)現(xiàn)效果

實(shí)現(xiàn)方法

.children獲取子元素集合

getElementsByTagName() 方法可返回帶有指定標(biāo)簽名的對(duì)象的集合,這里我們直接獲取按鈕標(biāo)簽<button>.

onclick 事件會(huì)在元素被點(diǎn)擊時(shí)發(fā)生,

innerHTML 屬性設(shè)置或返回表格行的開(kāi)始和結(jié)束標(biāo)簽之間的 HTML。

先獲取<div>塊下的子節(jié)點(diǎn)，一共四個(gè)<div>，然后再獲取button標(biāo)簽，
點(diǎn)擊事件：返回標(biāo)簽之間的HTML如果是將黑色div變成紅色，將<div>的backgroundColor屬性設(shè)置為紅色，反之同理。