当前位置：网站首页>Pro2: modify the color of div block

Pro2: modify the color of div block

2022-07-07 17:52:00 【Jing Yu】

Author URI ： static Yu
🧡 brief introduction ：CSDN Full stack quality Creator 、 Huawei cloud sharing expert 、 Alibaba cloud community blog expert , Founder of front-end knowledge exchange community
Community address ： Front end knowledge exchange community
🧡 A variety of source code ： Various benefits are full

What is? JavaScript？

The first web page is a simple static web page , To enable users to interact with web pages , Designed JavaScript Language .JavaScript Language is a language that can be used to add interactivity to web pages · Language . We usually hear right JavaScript The general description of is that this is a scripting language . A scripting language is a language that is executed in the browser , It's a program, not software . Scripting languages can be added to use html and css In the built site , It will be automatically executed when the web page is loaded , And realize the dynamic effect of various pages , It plays an important role in page interaction .

Achieve the goal

Click the button to turn the four small black squares into red , Click again to turn the red one into black

Implementation code 

<!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()"> Will be black div Turn red </button><br>
<div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<script>
    //  First get div Child nodes of 
    var divs=document.getElementById("container").children;
    // Get button 
    var btn=document.getElementsByTagName("button")[0];
    // Click the method of the event 
   function cli()
    {
    
        if (btn.innerHTML === ' Will be black div Turn red '){
    
                for (var i = 0; i < 4; i++) {
    
                    divs[i].style.backgroundColor = "red";
                }
            btn.innerHTML = " Turn red div black ";
        }
        else {
    
            for (var i = 0; i < 4; i++) {
    
                divs[i].style.backgroundColor = "black";
            }
            btn.innerHTML = " Will be black div Turn red ";
        }
    }
</script>
</body>
</html>

Realization effect

Insert picture description here
Insert picture description here

Implementation method

.children Get a subset of

getElementsByTagName() Method returns a collection of objects with the specified tag name , Here we get the button label directly <button>.

onclick Events occur when an element is clicked ,

innerHTML Property sets or returns the distance between the start and end labels of a table row HTML.

First get <div> Child nodes under the block , There are four <div>, And then get button label ,
Click event ： Returns the HTML If it is black div Turn red , take <div> Of backgroundColor Property is set to red , On the contrary, the same is true .

原网站

版权声明
本文为[Jing Yu]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/188/202207071534522947.html

边栏推荐

猜你喜欢

随机推荐