• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

jQuery实现为元素添加和删除class代码示例

jQuery 程序员 2年前 (2019-01-17) 182次浏览 已收录 0个评论

在网页实际应用中,需要根据不同的条件来改变元素的CSS样式。

通过动态的给元素添加删除一个CSS类可以实现此功能比较便利,下面通过实例来介绍一下。

一.使用addClass()和removeClass()添加和删除一个CSS类:

代码实例如下:

以上代码可以添加删除指定的样式,上面只是一个演示,可以根据具体的需要进行添加或者删除。

若要看代码效果请大家点击“运行代码”按钮。

[code]<!DOCTYPE html> <html> <head> <meta charset=” utf-8″> <title>jQuery实现为元素添加和删除class代码示例-搞代码gaodaima.com</title> <style type=”text/css”> .mytest{   border:1px solid green;   width:100px;   height:100px;   color:red; } </style> <script src=”http://libs.baidu.com/jquery/1.9.0/jquery.js”></script> <script type=”text/javascript”> $(document).ready(function () {   $(“#add”).click(function () {     $(“div”).addClass(“mytest”);   });   $(“#del”).click(function () {     $(“div”).removeClass(“mytest”);   }) }) </script> <body> <div>珍惜当前,因为只有当前才是实实在在的。搞代码</div> <button id=”add”>添加样式</button> <button id=”del”>删除样式</button> </body> </html>[/code]

二.使用toggleClass()进行样式类的添加和删除的切换:

如果匹配对象具有指定的样式类,那么toggleClass()就可以删除此指定的类,如果没有就会添加指定的类。代码实力如下:

以上代码可以进行指定样式类的删除与添加的切换。若要看代码效果请大家点击“运行代码”按钮。

若要看代码效果请大家点击“运行代码”按钮。

[code]<!DOCTYPE html> <html> <head> <meta charset=” utf-8″> <title>jQuery实现为元素添加和删除class代码示例-搞代码gaodaima.com</title> <style type=”text/css”> .mytest{   border:1px solid green;   width:100px;   height:100px;   color:red; } </style> <script src=”http://libs.baidu.com/jquery/1.9.0/jquery.js”></script&gt; <script type=”text/javascript”> $(document).ready(function () {   $(“#switch”).click(function () {     $(“div”).toggleClass(“mytest”);   }); }) </script> <body> <div class=”mytest”>珍惜当前,因为只有当前才是实实在在的</div> <button id=”switch”>删除与添加切换</button> </body> </html>[/code]


喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址