js 基础练习之类(class)的操作

最新推荐文章于 2023-02-08 13:21:13 发布

autm许

最新推荐文章于 2023-02-08 13:21:13 发布

阅读量265

点赞数

分类专栏：前端 js

本文链接：https://blog.csdn.net/qq_17108919/article/details/116063993

版权

前端同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

26 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js 基础练习之类的操作</title>
    <style>
        #box {
            width: 100px;
            margin-top: 10px;
        }

        .item1 {
            height: 100px;
            background: orangered;
        }

        .item2 {
            height: 200px;
            background: royalblue;
        }
    </style>
</head>

<body>
    <button id="add">添加class</button>
    <button id="del">移除class</button>
    <button id="toggle">切换class</button>
    <div id="box" class="item1"></div>
    <script>
        window.onload = function () {
            var box = document.getElementById('box');
            var addBtn = document.getElementById('add');
            var delBtn = document.getElementById('del');
            var toggleBtn = document.getElementById('toggle')
            addBtn.onclick = function () {
                var cn = 'item2'
                if (!hasClass(box, cn)) {
                    addClass(box, cn)
                }
                // box.className += ' item2'
            }
            delBtn.onclick = function () {
                var cn = 'item2'
                if (hasClass(box, cn)) {
                    removeClass(box, cn)
                }
            }
            toggleBtn.onclick = function () {
                toggleClass(box, 'item2')
            }
            // 判断元素是否已经含有class
            function hasClass(obj, cn) {
                var reg = new RegExp(`\\b${cn}\\b`);
                return reg.test(obj.className)
            }
            // 添加元素指定calss的属性
            function addClass(obj, cn) {
                box.className += ' ' + cn
            }
            // 移除元素指定class的属性
            function removeClass(obj, cn) {
                var reg = new RegExp(`\\b${cn}\\b`);
                console.log(reg)
                box.className = box.className.replace(reg, '')
            }
            // toggleClass 可以用来切换一个类（有则删除，没有则添加）
            function toggleClass(obj, cn) {
                if (hasClass(obj, cn)) {
                    removeClass(obj, cn)
                } else {
                    addClass(obj, cn)
                }
            }
        }
    </script>
</body>

</html>

autm许

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 基础练习之类(class)的操作

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js
复制链接

扫一扫