16--Jquery对样式的操作之删除和切换样式

最新推荐文章于 2023-04-21 14:56:26 发布

qwy715229258163

最新推荐文章于 2023-04-21 14:56:26 发布

阅读量193

点赞数 2

分类专栏： Jquery 文章标签： jquery css html javascript

本文链接：https://blog.csdn.net/qwy715229258163/article/details/113878594

版权

Jquery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

使用removeClass()删除样式
实例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Jquery的removeClass()移除样式</title>
    <script src="jquery-1.11.3.js"></script>

    <style>
        .myClass{
            font-weight: 900;
            color:red;
        }
        .another{
            font-style: italic;
            color: blue;
        }
    </style>
</head>
<body>
    <p title="你喜欢的运动" class="myClass another">请选择你喜欢的运动？</p>
    <ul id="sport">
        <li>足球</li>
        <li>王者荣耀</li>
        <li>乒乓球</li>
        <li>排球</li>
    </ul>
     <script>
        $(function(){
            /*removeAttr()移除的是属性*/
            /*$("p").removeAttr("class");*/
            /*removeClass（）移除的是class属性的值*/
            $("p").removeClass("myClass");
        });
     </script>
</body>
</html>

注意：removeAttr()移除的是属性。removeClass（）移除的是class属性的值。
2. 使用toggleClass()切换样式
实例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Jquery的toggleClass切换样式</title>
    <script src="jquery-1.11.3.js"></script>

    <style>
        .myClass{
            font-weight: 900;
            color:red;
        }
        .another{
            font-style: italic;
            color: blue;
        }
    </style>
</head>
<body>
    <p title="你喜欢的运动" class="myClass">请选择你喜欢的运动？</p>
    <ul id="sport">
        <li>足球</li>
        <li>王者荣耀</li>
        <li>乒乓球</li>
        <li>排球</li>
    </ul>
     <script>
        $(function(){
            /*给p标签绑定一个点击事件*/
            $("p").click(function(){
                /*切换样式：指的是该样式在有和没有之间进行切换*/
                $("p").toggleClass("another");
            });
        });
     </script>
</body>
</html>

注意：toggleClass（）指的是该样式在有和没有之间进行切换。

qwy715229258163

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
16--Jquery对样式的操作之删除和切换样式

使用removeClass()删除样式实例：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>Jquery的removeClass()移除样式</title> <script src="jquery-1.11.3.js"></script> <style> .
复制链接

扫一扫

专栏目录