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

    classList属性是HTML5新增的一个属性,返回元素的类名。但是ie10以上版本支持。

    该属性用于在元素中添加,移除及切换 CSS 类。有以下方法

    添加类:

    element.classList.add(’类名’);

    focus.classList.add('current');
    

    移除类:

    element.classList.remove(’类名’);

    focus.classList.remove('current');
    

    切换类:

    element.classList.toggle(’类名’);

    focus.classList.toggle('current');
    

    注意:以上方法里面,所有类名都不带点

    <!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>Document</title>
        <style>
            .bg {
                background-color: black;
            }
        </style>
    </head>
    
    <body>
        <div class="one two"></div>
        <button> 开关灯</button>
        <script>
            // classList 返回元素的类名
            var div = document.querySelector('div');
            // console.log(div.classList[1]);
            // 1. 添加类名  是在后面追加类名不会覆盖以前的类名 注意前面不需要加.
            div.classList.add('three');
            // 2. 删除类名
            div.classList.remove('one');
            // 3. 切换类
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                document.body.classList.toggle('bg');
            })
        </script>
    </body>
    
    </html>
    
  • 相关阅读:
    如何创建并运行Java线程
    PHP捕获Fatal error错误与异常处理
    WEB系统启动时加载Log4j的配置文件
    Log4j日志配置
    CharacterEncodingFilter-Spring字符编码过滤器
    Struts2的属性驱动与模型驱动的区别
    Filter之——GZIP全站压缩
    乱码问题总结
    【总结】编写自己的JDBC框架
    四大域总结
  • 原文地址:https://www.cnblogs.com/jianjie/p/12194382.html
Copyright © 2011-2022 走看看