JavaScript operation element examples

JavaScript operation element examples

For more information about operating elements, please refer to the previous article: JavaScript WebAPI, DOM, events, operating elements

Case: Display hidden password case

Core idea: (Operating form element attributes)

  • Click the eye button and change the password box type to a text box so you can see the password inside. One button with two states.
  • Click once to switch to a text box, click again to switch to a password box
  • Algorithm: Use a flag variable to determine the flag value. If it is 1, switch to a text box and set the flag to 0. If it is 0, switch to a password box and set the flag to 1. 

<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: 2px;
        right: 2px;
        width: 24px;
    }
</style>
<body>
    <div class="box">
        <label for="">
            <img src="./image/close.png" alt="" id="eye">
        </label>
        <input type="password" name="" id="pwd">
    </div>
    <script>
        var eye = document.getElementById('eye')
        var pwd = document.getElementById('pwd')
        var flag=0
        eye.onclick=function(){
        	//Change text box type, image and tag value after clicking if(flag==0){
                pwd.type = 'text'
                eye.src='./image/open.png'
                flag=1 
            }else{
                pwd.type = 'password'
                flag=0
            }
        }
    </script>
</body>

Example: Cycling sprites

Core idea: (operating element style)

  • Use the for loop to modify the background position of the sprite image
  • background-position makes the i index number in the loop * 44 the y coordinate of each image 

<style>
    *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style-type: none;
    }
    .box{
        width: 250px;
        margin: 100px auto;
    }
    .box li{
        margin: 15px;
        float: left;
        width: 24px;
        height: 24px;
        background: url(./image/sprite.png) no-repeat;
    }
</style>
<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        // 1. Get all the small li of the element 
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            // Multiply the index number by 44 to get the background y coordinate of each li var y = i * 44;
            lis[i].style.backgroundPosition = '0 -' + y + 'px';
        }
    </script>
</body>

Case: Password box verification information

Core idea: (Use className to modify style attributes)

  • The first event to be judged is that the form loses focus onblur
  • If the input is correct, the correct information will be displayed with a small green icon.
  • If the input is not 6 to 16 digits, the error message will be displayed with a small red icon.
  • Because there are many changing styles, use className to modify the style
<style>
    div {
        width: 600px;
        margin: 100px auto;
    }
    .message {
        display: inline-block;
        font-size: 12px;
        color: #999;
        background: url(./image/mess.png) no-repeat left center;
        padding-left: 20px;
    }
    .wrong {
        color: red;
        background-image: url(./image/wrong.png);
    }
    .right {
        color: green;
        background-image: url(./image/right.png);
    }
</style>
<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">Please enter a 6-16 digit password</p>
    </div>
    <script>
        var ipt = document.querySelector('.ipt')
        var message = document.querySelector('.message')
        ipt.onblur = function () {
            if (this.value.length < 6 || this.value.length > 16) {
                messgae.className = 'message wrong'
                messgae.innerHTML = 'Your input is incorrect. 6 to 16 digits are required.'
            } else {
                messgae.className = 'message right'
                messgae.innerHTML = 'Your input is correct'
            }
        }
    </script>
</body>

1749.png)

Case: Background color change

Core idea: (operating element style attributes)

Register click events for 4 small images in a loop. When you click on this image, change the page background to the current image. Core algorithm: Get the src path of the current image and set it as the background for the body. 

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background: url(./image/1.jpg) no-repeat center top;
    }
    li{
        list-style-type: none;
    }
    .tu{
        overflow: hidden;
        margin: 100px auto;
        background-color: #fff;
        width: 410px;
        padding-top: 3px;
    }
    .tu li{
        float: left;
        margin: 0 1px;
        cursor: pointer;
    }
    .tu img{
        width: 100px;
    }
</style>
<body>
    <ul class="tu">
        <li><img src="./image/1.jpg"></li>
        <li><img src="./image/2.jpg"></li>
        <li><img src="./image/3.jpg"></li>
        <li><img src="./image/4.jpg"></li>
    </ul>
    <script>
        //Get elements var imgs = document.querySelector('.tu').querySelectorAll('img');
        //Register event for(var i=0;i<imgs.length;i++){
            imgs[i].onclick=function(){
                // this.src path to body
                document.body.style.backgroundImage='url('+this.src+')';
            }
        }
    </script>
</body>

Case: Table color change

Core idea: (exclusive thinking)

Use new mouse events: onmouseover when the mouse passes over, onmouseout when the mouse leaves. Core idea: when the mouse passes over a tr row, the background color of the current row changes, and when the mouse leaves, the current background color is removed. Note: The first row (the row in the thead) does not need to change color, so the rows in the tbody are obtained. 

<style>
    table{
        width:800px;
        margin: 100px auto;
        text-align: center;
        border-collapse: collapse;
        font-size: 14px;
    }
    thead tr{
        height: 30px;
        background-color: skyblue;
    }
    tbody tr{
        height: 30px;
    }
    tbody td{
        border-bottom: 1px solid #d7d7d7;
        font-size: 12px;
        color: blue;
    }
    .bg{
        background-color: pink;
    }
</style>
<body>
    <table>
        <thead>
            <tr>
                <th>Code</th>
                <th>Name</th>
                <th>Latest published net worth</th>
                <th>Accumulated net value</th>
                <th>Previous unit net value</th>
                <th>Net asset growth rate</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>Agricultural Bank of China Jinsui 3-month regular open bond</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                +0.047%
            </tr>
            <tr>
                <td>003526</td>
                <td>Agricultural Bank of China Jinsui 3-month regular open bond</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                +0.047%
            </tr>
            <tr>
                <td>003526</td>
                <td>Agricultural Bank of China Jinsui 3-month regular open bond</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                +0.047%
            </tr>
            <tr>
                <td>003526</td>
                <td>Agricultural Bank of China Jinsui 3-month regular open bond</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                +0.047%
            </tr>
            <tr>
                <td>003526</td>
                <td>Agricultural Bank of China Jinsui 3-month regular open bond</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                +0.047%
            </tr>
            <tr>
                <td>003526</td>
                <td>Agricultural Bank of China Jinsui 3-month regular open bond</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                +0.047%
            </tr>
        </tbody>
    </table>
    <script>
        //Get the element var trs = document.querySelector('tbody').querySelectorAll('tr')
        //Register event for(var i=0;i<trs.length;i++){
            trs[i].onmouseover=function(){
                this.className='bg'
            }
            trs[i].onmouseout=function(){
                this.className=''
            }
        }
    </script>
</body>

Case: Select all and deselect all in a form

Core idea:

  • To select and deselect all: Set the checked attribute (selected state) of all checkboxes to follow the select all button
  • All checkboxes need to be checked. To select all, bind click events to all the checkboxes below. Each time you click, loop through all the checkboxes below to see if there is any that is not checked. If there is one that is not checked, then all the above will not be checked.
  • You can set a variable to control whether all selections are selected 

<style>
    *{
        padding: 0;
        margin: 0;
    }
    .wrap{
        width: 300px;
        margin: 100px auto 0;
    }
    table{
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #c0c0c0;
        width: 300px;
    }
    th,td{
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
    }
    th{
        background-color: #09c;
        font: bold 16px 'Microsoft YaHei';
        color: #fff;
    }
    td{
        font: 14px 'Microsoft YaHei';
    }
    tbody tr{
        background-color: #f0f0f0;
    }
    tbody tr:hover{
        cursor: pointer;
        background-color: #fafafa;
    }
</style>
<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="cbAll" />
                    </th>
                    <th>Products</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    iPad Pro
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    iPad Air
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        //Get element var cbAll = document.getElementById('cbAll'); //Select all button var tbs = document.getElementById('tb').getElementsByTagName('input'); //All checkbox buttons //Register event //Select all cbAll.onclick = function () {
            for (var i = 0; i < tbs.length; i++) {
                tbs[i].checked = this.checked;
            }
        }
        //Reverse selection for (var i = 0; i < tbs.length; i++) {
            tbs[i].onclick = function () {
                var flag = true //Control the select all button//Every time you click the checkbox, check whether all are selected for (var i = 0; i < tbs.length; i++) {
                    if (tbs[i].checked == false) {
                        flag = false
                        break
                    }
                }
                cbAll.checked = flag
            }
        }
    </script>
</body>

Case: Tab bar switching

Core idea: (Exclusive idea)

  • Tab bar switching has 2 large modules
  • Click on the module tab on the top, the background color of the current one will be red, and the rest will remain unchanged (exclusive idea) How to modify the class name
  • The module content below will change with the tabs above. Therefore, the following module changes are written into the click event. Rule: The content displayed in the module below corresponds to the tab above one by one and matches
  • Core idea: Add custom attributes to all small li in the tab_list above, and the attribute values ​​​​start from 0.
  • When you click on a small li in tab_list, the content of the corresponding number in tab_con will be displayed, and the rest will be hidden (exclusive idea)
<style>
    *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style-type: none;
    }
    .tab{
        width:978px;
        margin: 100px auto;
    }
    .tab_list{
        height: 39px;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
    }
    .tab_list li{
        float: left;
        height: 39px;
        line-height: 39px;
        padding: 0 20px;
        text-align: center;
        cursor: pointer;
    }
    .tab_list .current{
        background-color: #c81623;
        color: #fff;
    }
    .item{
        display: none;
    }
    .item_info{
        padding: 20px 0 0 20px;
    }
</style>
<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">Product Introduction</li>
                <li>Specifications and packaging</li>
                <li>After-sales guarantee</li>
                <li>Product Reviews (50,000)</li>
                <li>Mobile Community</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                Product introduction module content</div>
            <div class="item">
                Specifications and packaging module content</div>
            <div class="item">
                After-sales guarantee module content</div>
            <div class="item">
                Product reviews (50000) module content</div>
            <div class="item">
                Mobile community module content</div>
        </div>
    </div>
    <script>
        //Get the element var lis = document.querySelector('.tab_list').querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        //Register event for (var i = 0; i < lis.length; i++) {
            //Set the index number for the li element lis[i].setAttribute('index', i);
            lis[i].onclick = function () {
                //Tab content //Clear all li's current class for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                //Add the current class to itself this.className = 'current';

                //Display content var index = this.getAttribute('index');
                // Clear the contents of the remaining items for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }
                // Display the contents of its own item items[index].style.display = 'block';
            }
        }
    </script>
</body>

Summarize

This is the end of this article about JavaScript operation elements. For more relevant js operation element content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Detailed explanation of using new methods of html5 to manipulate element class names in JavaScript
  • 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
  • JavaScript operation elements teach you how to change the page content style

<<:  Ubuntu E: Unable to obtain lock /var/lib/dpkg/lock-frontend - open (11: Resource temporarily unavailable)

>>:  MySQL compressed package version zip installation configuration method

Recommend

Detailed explanation of the example of exporting data from a specified table in MySQL

Detailed explanation of MySQL exporting data from...

Select web page drop-down list and div layer covering problem

Questions about select elements in HTML have been...

Automatic failover of slave nodes in replication architecture in MySQL 8.0.23

I have been in contact with MGR for some time. Wi...

Design reference WordPress website building success case

Each of these 16 sites is worth reading carefully,...

Detailed explanation of CSS complex selectors and CSS font styles and color attributes

I have learned some basic selectors of CSS before...

How to draw the timeline with vue+canvas

This article example shares the specific code of ...

How to use MySQL covering index and table return

Two major categories of indexes Storage engine us...

25 Vue Tips You Must Know

Table of contents 1. Limit props to type lists 2....

How to implement remote access control in Centos 7.4

1. SSH remote management SSH is a secure channel ...

harborRestart operation after modifying the configuration file

I won't say much nonsense, let's just loo...

Solution to Linux not supporting all commands

What should I do if Linux does not support all co...

Several ways to run Python programs in the Linux background

1. The first method is to use the unhup command d...

Introduction to who command examples in Linux

About who Displays users logged into the system. ...

Analysis of the Principle and Method of Implementing Linux Disk Partition

remember: IDE disk: the first disk is hda, the se...

How to create a table in mysql and add field comments

Directly post code and examples #Write comments w...