前端样式类操作----class属性

最新推荐文章于 2024-05-16 21:48:05 发布

普罗旺斯_浅笑

最新推荐文章于 2024-05-16 21:48:05 发布

阅读量1.7k

点赞数 1

分类专栏：前端文章标签：前端样式类增加样式类修改删除样式类

本文链接：https://blog.csdn.net/qq_21491877/article/details/88240403

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>对class进行操作</title>
       <script src="js/jquery.js"></script>
   </head>

   <style>
       .another{
           color: blue;
       }
       .redColor{
           color: red;
       }
   </style>
   <body>
       <p class="myClass" title="学习修改class属性">学习修改class属性</p>
       <input type="button" value="追加属性蓝色"/>

       <input type="button" value="移除属性"/>
   </body>


   <script>
       //attr获取class属性
       var p_class = $("p").attr("class");
       //attr设置，替换成另一个属性
       $("p").attr("class","replaceClass");
       //addClass点击追加属性
       $("input:eq(0)").click(function(){
           $("p").addClass("another");

       });
       //removeClass移除属性
       $("input:eq(1)").click(function(){
           $("p").removeClass("another");

       });

       //hasClass判断是否存在某个class
       var isExit = $("p").hasClass("replaceClass");
       alert(isExit);

       //text()
       var p_text = $("p").text();
       alert(p_text);
   </script>
</html>

普罗旺斯_浅笑

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端样式类操作----class属性

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;对class进行操作&lt;/title&gt; &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
复制链接

扫一扫