classList属性 H5新增

最新推荐文章于 2024-05-15 19:27:12 发布

MDR_0820

最新推荐文章于 2024-05-15 19:27:12 发布

阅读量120

点赞数

文章标签： list javascript 前端

本文链接：https://blog.csdn.net/MDR_0820/article/details/121030257

版权

class List

class List 是H5 新增的一个属性返回元素的类名但 ie 10以上版本才支持
该属性在元素中添加、移除、及切换css类

添加类

element.class List（’类名‘）

dy>
    <div class="one tow"></div>
    <script>
        var div = document.querySelector('div')
        // console.log(div.classList[1]);  
        // 添加类名 是在后面添加 不会覆盖以前的类名
        div.classList.add('three')

在这里插入图片描述
删除类
element.class.remove(‘类名’)

<body>
        <div class="one tow"></div>
        <script>
            var div = document.querySelector('div')
            // console.log(div.classList[1]);  
            // 添加类名 是在后面添加 不会覆盖以前的类名
            div.classList.add('three')
        // 删除类名
        div.classList.remove('one')
    </script>

在这里插入图片描述
切换类
element.classList.toggle (‘类名’）

<style>
        .bg{
            background-color: #000;
        }
    </style>
</head>
    <body>
        <div class="one tow"></div>
        <button> 开关</button>
        <script>
            var div = document.querySelector('div')
            // console.log(div.classList[1]);  
            // 添加类名 是在后面添加 不会覆盖以前的类名
            div.classList.add('three')
        // 删除类名
            div.classList.remove('one')
        // 切换类  classList.toggle
            var btn = document.querySelector('button');
            btn.addEventListener('click',function(){
                document.body.classList.toggle('bg')
            })
    </script>

在这里插入图片描述

MDR_0820

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
classList属性 H5新增

class Listclass List 是H5 新增的一个属性返回元素的类名但 ie 10以上版本才支持该属性在元素中添加、移除、及切换css类添加类element.class List（’类名‘）dy> <div class="one tow"></div> <script> var div = document.querySelector('div') // console.log(d
复制链接

扫一扫