JQuery：通过属性addClass、removeClass和toggleClass实行增加和删除类

来源：互联网发布：贵州通软件骗局编辑：程序博客网时间：2024/06/05 19:12

代码示例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style>        div{            height: 300px;            width: 300px;            background-color: orange;        }        .a{            background-color: #91DB4B;        }    </style>    <title>类切换</title>    <script src="../../js/jquery-3.1.1.min.js"></script>    <script>        $(function () {            //鼠标事件            $("#d").mouseover(function () {                //增加类                $(this).addClass('a');            }).mouseout(function () {                //删除类                $(this).removeClass('a');            })        })    </script></head><body><div id="d">    fdhjuyk</div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style>        div{            height: 300px;            width: 300px;            background-color: orange;        }        .a{            background-color: #91DB4B;        }    </style>    <title>类切换</title>    <script src="../../js/jquery-3.1.1.min.js"></script>    <script>        $(function () {            /*开始没有类a则添加，有类a则删除*/            $("#d").mouseover(function () {                //在删除与添加类操作不停切换时，使用toggleClass                $(this).toggleClass('a');            }).mouseout(function () {                $(this).toggleClass('a');            })        })    </script></head><body><div id="d">    fdhjuyk</div></body></html>

阅读全文

0 0