jquery怎样给元素添加类class 怎样移除元素的类名 class呢

待我称王封你为后i 2024-04-18 10:06 91阅读 0赞

<!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>
            .a {
                width: 200px;
                height: 200px;
            }
    
            .bg {
                background: gray;
            }
    
            .text {
                color: #f00;
            }
        </style>
    </head>
    
    <body>
        <div id="box" class="a text">hello world</div>
        <button id="add">add</button>
        <button id="rm">rm</button>
    </body>
    
    </html>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $('#add').on('click', function () {
    
            $('#box').addClass('bg')
        })
        $('#rm').on('click', function () {
            $('#box').removeClass('text')
        })
    </script>

上面的代码中，我给文字颜色设置成红色，如果移除类之后就会变成默认的黑色 jq对象.removeClass即可移除

而元素本身没有背景的，添加类之后则有了灰色的背景 jq对象addClass即可添加类

发表评论取消回复

表情：

评论列表（有 0 条评论，91人围观）

还没有评论，来说两句吧...

相关阅读

相关 js怎样获取元素有哪些类 class 原生js获取元素的类名

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <...

布满荆棘的人生/ 2024年04月19日 11:59/ 0 赞/ 81 阅读

相关 jquery怎样设置元素的样式怎样修改元素的样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

你的名字/ 2024年04月19日 10:08/ 0 赞/ 111 阅读

相关 jquery 点击事件点击元素添加class，兄弟节点移除class

迎大家一起交流学习n(\*≧▽≦\*)n $("circle").on('click', 'li',function(){ $(this...

﹏ヽ暗。殇╰゛Y/ 2024年04月18日 18:27/ 0 赞/ 91 阅读

相关 jquery怎样给元素添加类class 怎样移除元素的类名 class呢

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"...

待我称王封你为后i/ 2024年04月18日 10:06/ 0 赞/ 92 阅读

相关 jQuery UI 实例 - 移除 Class（Remove Class）

当动画样式改变时，为匹配的元素集合内的每个元素移除指定的 Class。如需了解更多有关 `.removeClass()` 方法的细节，请查看 API 文档 [.remove

Dear 丶/ 2024年03月23日 12:04/ 0 赞/ 98 阅读

相关 js动态给dom元素添加类名

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

青旅半醒/ 2022年09月07日 09:38/ 0 赞/ 340 阅读

相关原生JS给元素添加类移除类

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na

末蓝、/ 2022年05月17日 03:58/ 0 赞/ 266 阅读

相关 Js操作添加class和移除class

这种代码通常在类似tab选择的那种拥有select的就是选中的状态应用的场景还是很多的 ![watermark_type_ZmFuZ3poZW5naGVpdGk

àì夳堔傛蜴生んèń/ 2022年04月17日 03:13/ 0 赞/ 408 阅读

相关 JavaScript给元素添加class属性

注意：element.classList.remove()、element.classList.add() — ie9及以下不兼容 // 移除div的class属性

水深无声/ 2022年02月13日 10:57/ 0 赞/ 608 阅读

相关 js 操作元素样式style、类名class

操作样式操作html的style属性中的样式添加样式对象名.style.去掉样式中的-，并-后的首字母为大写

系统管理员/ 2021年07月24日 13:14/ 0 赞/ 682 阅读