zoukankan      html  css  js  c++  java
  • classList属性

    1)知识梳理

    classList 是H5新增的一个属性

    作用:获取 添加 删除 切换CSS类

    添加 删除 切换 等的使用 需要先获取到

    2)返回值

    返回一个数组
    DOMTokenList(3) ["one", "two", "three", value: "one two three"] 0: "one" 1: "two" 2: "three" length: 3 value: "one two three" __proto__: DOMTokenList

    3)代码范例

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>classList</title>
        <style>
            .red { background: black; }
        </style>
    </head>
    <body>
    <div class="one two three"></div>
    <button>开关灯</button>
    <script>
        var div = document.querySelector('div');
        var btn = document.querySelector('button');
        //1 获取类名
        console.log(div.classList);//返回一个数组
        console.log(div.classList[0]);//取得第一个元素
    
        //2 添加类名 是追加的形式 不会覆盖前面的
        div.classList.add('five');
        
        //3 删除类名
        div.classList.remove('five');
    
        //4 toggle 切换类名 [如果有 我删除 如果没有 我添加]
        btn.onclick = function(){
            document.body.classList.toggle('red');
        }
    </script>
    </body>
    </html>
  • 相关阅读:
    chroot 与 jail
    3-07. 求前缀表达式的值(25) (ZJU_PAT数学)
    一种监控全部账户登陆及操作命令的方法
    怎样设计接口?
    UVA10869
    网络直播电视之M3U8解析篇 (下)
    LCD显示--Ht1621b芯片显示屏驱动
    混淆
    android 调试
    eclipse+webservice开发实例
  • 原文地址:https://www.cnblogs.com/fuyunlin/p/14475053.html
Copyright © 2011-2022 走看看