Native js develop simple box, click on the color change, and then click Cancel color, three solutions

The main focus of this article

There are four methods classList

// add ( "class name"); to add an element of class, for example, add ( "checked")

// remove ( "class name"); delete class

// contains ( "class name"); classList determine whether the elements included in this class, contains returns true, false otherwise

// toggle () to switch class, if there are elements of this class, we will delete, or to add class

Renderings:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复选框</title>
    <style>
        .options>a {
            color: #333;
            margin: 20px;
        }
        
        .checked {
            color: red!important;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="options">
            <a href="javascript:;" class="checked">语文</a>
            <a href="javascript:;"></MathematicsA > 
            < A href = "JavaScript :;" > English </ A > 
        </ div > 
    </ div > 
    < Script > 
        // goal: checkbox effect, the style is simple, click the font color can be changed 
        var List = document.querySelectorAll ( " .options a " ); // first tags get all 
        the console.log (List); // array of class 
        // list.onclick = function () {// set of elements is not a direct operation, only by the subscript operator, even if it is only a set of elements 

        // } 
        for ( var I =  0 ; I< List.length; I ++ ) { 

            List [I] .onclick =  function () { 

                // the first method, there is determined the class name, class name, but if a plurality of nylon 
                // IF (this.className == 'checked') {// If this contains class, click to remove class 
                //      this.className = ''; 
                // } // else cancel the else { 
                //      this.className = 'the checked'; 
                // } 

                / / second method: classList 
                // the console.log (this.classList); 
                // classList there are four methods 
                // the Add ( "class name"); adding a class to an element, such as the Add ( "the checked")              
                / / the Remove ( "class name"); delete class             
                //contains ( "class name"); classList determine whether the elements included in this class, contains returns true, otherwise it returns false                     
                // Toggle () switching class, if there are elements of this class, we will delete, or to add class 


                // if (this.classList.contains ( "checked") ) {// if classList include this class, click on the delete class, or add the class 
                //      this.classList.remove ( "the checked"); 
                // } the else {/ / or cancel 
                //      this.classList.add ( "the checked"); 
                // } 

                // third method Toggle 
                the this .classList.toggle ( ' the checked ' ); 

            } 
        } 
    </ Script > 
</ body > 

</ HTML >

Native js develop simple box, click on the color change, and then click Cancel color, three solutions

Guess you like