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>
    
  • 相关阅读:
    flask和tornado的区别
    tornado1
    人脸识别
    ocr:img转成pdf,pdf转成pdf
    flask2
    《个人-GIT使用方法》
    课后作业-阅读任务-阅读笔记
    课后作业-阅读任务-阅读提问
    结对-四则运算生成器-设计文档
    团队-手机备忘录-开发环境搭建过程
  • 原文地址:https://www.cnblogs.com/jianjie/p/12194382.html
Copyright © 2011-2022 走看看