HTML5-Classlist样式操作

Bertha 。 2021-10-29 17:42 267阅读 0赞

[HTML5-Classlist样式操作][HTML5-Classlist]

<!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="为第一个li元素添加样式" id="add">
    <input type="button" value="为第二个li元素移除样式" id="remove">
    <input type="button" value="为第三个li元素切换样式" id="toggle">
    <input type="button" value="判断第四个li元素是否包含某个样式" id="contain">
    <script>
        window.οnlοad=function(){
            /*add:为元素添加指定名称的样式.一次只能添加一个样式*/
            document.querySelector("#add").οnclick=function(){
                /*classList:当前元素的所有样式列表-数组*/
                document.querySelector("li").classList.add("red");
                document.querySelector("li").classList.add("underline");
                //document.querySelector("li").className="red underline"
                /*获取样式*/
                var result=document.querySelector("li").classList.item(2);
                console.log(result);
            }
    
            /*remove:为元素移除指定名称的样式(不是移除class属性)，一次也只能移除一个*/
            document.querySelector("#remove").οnclick=function(){
                document.querySelector(".blue").classList.remove("blue");
            }
    
            /*toggle：切换元素的样式：如果元素之前没有指定名称的样式则添加。如果有则移除*/
            document.querySelector("#toggle").οnclick=function(){
                document.querySelectorAll("li")[2].classList.toggle("green");
            }
    
            /*contains:判断元素是否包含指定名称的样式，返回true/false*/
            document.querySelector("#contain").οnclick=function(){
                var isContain=document.querySelectorAll("li")[3].classList.contains("red");
                console.log(isContain);
            }
        }
    </script>
    </body>
    </html>

posted on 2019-08-08 17:17 [eadela][] 阅读( ...) 评论( ...) [编辑][Link 1] 收藏

转载于:https://www.cnblogs.com/eadela/p/11322420.html

[HTML5-Classlist]: https://www.cnblogs.com/eadela/p/11322420.html
[eadela]: https://www.cnblogs.com/eadela/
[Link 1]: https://i.cnblogs.com/EditPosts.aspx?postid=11322420