HTML5-Classlist style operations

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red{
            color:red
        }
        .green{
            color: green;
        }
        .blue{
            color: blue;
        }
        .underline{
            text-decoration: underline;
        }
    </style>
</head>
<body>
<ul>
    <li class="red">前端与移动开发</li>
    <li class="blue">java</li>
    <li>javascript</li>
    <li class="red">c++</li>
</ul>
<input type = "button" value = " to style as the first element li" ID = "the Add"> 
<input type = "button" value = " style for removing the second li element" id = "remove" > 
<INPUT type = "Button" value = "style third switching li element" id = "Toggle"> 
<INPUT type = "Button" value = "Analyzing fourth li element contains a style" id = "Contain"> 
<Script> 
    the window.onload = function () { 
        / * the Add:. Add the specified name can only add an element style pattern * / 
        document.querySelector ( "the Add #") the onclick = function (). { 
            / * classList: style list of all current element - an array * / 
            document.querySelector ( "li") classList.add ( "Red");. 
            document.querySelector ( "li") classList.add ( "underline"). ;
            //document.querySelector("li").className="red underline" 
            / * get style * /
            . var document.querySelector Result = ( "Li") classList.item (2); 
        document.querySelector ( "# contain"). the onclick = function () {
            console.log (the Result); 
        } 

        / * the Remove: remove the specified name to the style element (not to remove the class attribute), one can only remove a * / 
        document.querySelector ( "# the Remove") onclick = function. () { 
            document.querySelector ( "Blue.") classList.remove ( "Blue");. 
        } 

        / * Toggle: switching style elements: If no name is added before the pattern element. If there is then removed * / 
        document.querySelector ( "# Toggle") the onclick = function () {. 
            Document.querySelectorAll ( "Li") [2] .classList.toggle ( "Green"); 
        } 

        / * the contains: Analyzing element contains the named style, returns to true / to false * / 
            var isContain = document.querySelectorAll ( "Li") [. 3] .classList.contains ( "Red"); 
            the console.log (isContain);
</body>
</html>
HTML5-Classlist style operations

Guess you like
