JavaScript operation elements teach you how to change the page content style

1. Operation elements

1.1. Change element content
1.2. The difference between innerText and innerHtml
1.3. Operate elements to modify element attributes
1.4、Time display example
1.5. Form attribute operation
1.6. Imitation of Jingdong's hidden and displayed password operation
1.7. Style attribute operation
1.8. Display and hide QR codes

Summarize

1. Operation elements

insert image description here

1.1. Change element content

insert image description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>Show current system time</button>
    <div>Some time</div>
    <p>123</p>
    <script>
        // 1. When we click on Anne's div, the text will change // (1) Get the element var btn = document.querySelector('button');
        var div = document.querySelector('div');
        // (2), register event btn.onclick = function(){
            div.innerText = getDate();
        }
        function getDate(){
            // Example: Get the current system time Wednesday, November 24, 2021 var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var dates = date.getDate();
            var arr = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
            var day = date.getDay();
            return 'Today is:' + year + 'year' + month + 'month' + dates + 'day' + arr[day];
        }
        // 2. You can display events without registering them var p = document.querySelector('p');
        p.innerHTML = getDate();
    </script>
</body>
</html>

1.2. The difference between innerText and innerHtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <p>
        I am text <span>123</span>
    </p>
    <script>
        // The difference between innerText and innerHtml // 1. innerText does not recognize HTML tags, while innerHtml recognizes HTML tags var div = document.querySelector('div');
        div.innerText = '<strong>Today is:</strong> 2021';
        // innerHtml identifies the html tag W3C standard // div.innerHTML = '<strong>Today is: </strong>2021';
        // 2. These two attributes are readable and writable and can get the content inside the element var p = div.innerHTML = document.querySelector('p');
        // innerText will remove spaces and line breaks console.log(p.innerText);
        console.log(p.innerHTML);
    </script>
</body>
</html>

1.3. Operate elements to modify element attributes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="ldh">Andy Lau</button>
    <button id='zxy'>Jacky Cheung</button>
    <img src='images/ldh.jpg' alt="" title="Andy Lau">
    <script>
        // Modify the element attribute src
        // 1. Get element var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        // 2. Register event handler zxy.onclick = function(){
            img.src = 'images/zxy.jpg';
            img.title = "Jacky Cheung";
        }
        ldh.onclick = function(){
            img.src = 'images/ldh.jpg';
            img.title="Andy Lau";
        }
    </script>
</body>
</html>

1.4、Time display example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 300px;
        }
    </style>
</head>
<body>
    <img src = "images/s.gif" alt="">
    <div id="div">Good morning, dear, write code well</div>
    <script>
        var img = document.querySelector('img');
        var div = document.getElementById('div');
        // Get the current system time var time = new Date();
        var h = time.getHours();
        if(h < 12){
            img.src = 'images/s.gif';
            div.innerHTML = "Good morning, go write some code";
        }else if(h < 18){
            img.src = 'images/x.gif';
            div.innerHTML = "Good afternoon, go and write some code";
        }else{
            img.src = 'images/w.gif';
            div.innerHTML = "Good evening, go write some code";
        }
    </script>
</body>
</html>

1.5. Form attribute operation

insert image description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>Button</button>
    <input type="text" value="Input content"/>
    <script>
        // 1. Get the element var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2. Register event handler btn.onclick = function(){
            // input.innerHTML = 'clicked'; This is a common joint venture, such as the content in a div tag // The value text content in the form is modified by value input.value = 'clicked';
            // If you want a form to be disabled and you can no longer click disabled, we want this button to be disabled // btn.disabled = true;
            this.disabled = true;
            // this refers to the caller of the event function}
    </script> 
</body>
</html>

1.6. Imitation of Jingdong's hidden and displayed password operation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        .box input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        .box img {
            position: absolute;
            top: 5px;
            right: 7px;
            width: 24px;
        }
    </style>
</head>
<body>
    <div class="box">
        <label for="">
            <img src="images/close.png" id="eye">
        </label>
        <input type="password" name="" id="pwd"></input>
    </div>
    <script>
        // 1. Get element var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        // 2. Register event handler var flag = 0;
        eye.onclick = function(){
            // After clicking once, the flag must be operated if (flag == 0) {
                pwd.type = 'text';
                eye.src="images/open.png";
                flag = 1; //assignment operation}else{
                pwd.type='password';
                eye.src="images/close.png";
                flag = 0;
            }
        }
    </script>
</body>
</html>

insert image description here

1.7. Style attribute operation

insert image description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // 1. Get the element var div = document.querySelector('div');
        // 2. Register event handler div.onclick = function() {
            this.style.backgroundColor = 'purple';
            this.style.width = '250px';
        }
    </script>
</body>
</html>

1.8. Display and hide QR codes

Key point: Modify display:none

insert image description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class = "close-btn" style="display: block;">
        <img src = "images/ewm.png" id = "img">
    </div>
    <script>
        // 1. Get the element var btn = document.querySelector('.close-btn');
        var img = document.querySelector('img');
        // 2. Register event processing btn.onclick = function(){
            btn.style.display = 'none';
        }
    </script>
</body>
</html>

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:

Detailed explanation of using new methods of html5 to manipulate element class names in JavaScript
JavaScript operation element examples
Detailed explanation of JavaScript WebAPI, DOM, events and operation element examples
js operates two json arrays to merge, remove duplicates, and delete a certain element
vue.js click event gets the operation of the current element object
JavaScript HTML DOM element (node) add, edit, delete operation example analysis
JS document form form element operation complete example
Summary of common methods of JavaScript operation elements

<<: Interview question: Three-row and three-column layout, tables are merged and nested tables are not allowed

>>: About the problem of offline installation of Docker package on CentOS 8.4