jQuery如何动态添加删除CSS样式?(代码示例)
前端  /  管理员 发布于 6年前   156
jQuery动态追加和移除CSS样式,有两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个实例讲解用法。
<!DOCTYPE html><html><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>jQuery动态添加删除CSS样式</title> <script type="text/javascript" src="http://localhost/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () {$("#btn1").click(function() { $('#txtContent').addClass('red'); //追加样式});$("#btn2").click(function() { $('#txtContent').removeClass('red'); //移除样式});$("#btn3").click(function() { $('#txtContent').addClass('red weight family'); //追加多个样式});$("#btn4").click(function() { $('#txtContent').removeClass('red weight'); //移除多个样式});$("#btn5").click(function() { $('#txtContent').removeClass(); //移除所有样式}); }); </script> <style type="text/css"> .default {font-size: 30px; } .red {color: red; } .weight {font-weight: bold; } .family {font-family: "华文隶书" } </style></head><body> <div id="txtContent">你好呀!jQuery基础知识!</div><br /> <input id="btn1" type="button" value="追加样式" /> <input id="btn2" type="button" value="移除样式" /> <input id="btn3" type="button" value="追加多个样式" /> <input id="btn4" type="button" value="移除多个样式" /> <input id="btn5" type="button" value="移除所有样式" /></body></html>
推荐学习: jQuery视频教程
以上就是jQuery如何动态添加删除CSS样式?(代码示例)的详细内容,更多请关注其它相关文章!
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号