Pro2：修改div块的颜色

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

什么是JavaScript
实现目标
实现代码
实现效果
实现方法

💛作者主页静Yu
🧡简介CSDN全栈优质创作者、华为云享专家、阿里云社区博客专家前端知识交流社区创建者
💛社区地址前端知识交流社区
🧡多种源码领取各种福利满满

什么是JavaScript

一开始的网页就是单纯的静态网页为了使用户能与网页交互设计出了JavaScript语言。JavaScript语言就是一种可以用来给网页添加交互性的·语言。我们平时听到对JavaScript的描述一般是这是一门脚本语言。脚本语言就是在浏览器执行的一种语言是一段程序并不是软件。脚本语言可以添加到使用html和css构建的网站中在网页加载时会自动执行并实现各种页面的动态效果在页面交互起到重要的作用。

实现目标

点击按钮将黑色的四个小方块变成红色再次点击将红色的变成黑色

实现代码

<!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的子节点
    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>