100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > JS/jQuery添加和移除CSS样式

JS/jQuery添加和移除CSS样式

时间:2023-05-10 09:47:10

相关推荐

JS/jQuery添加和移除CSS样式

有时候需要添加CSS样式和移除CSS样式,如添加display属性,设为隐藏。有时候需要移除display属性。

一、jQuery移除CSS样式的两种方法

注意:当其中一种不支持时,就尝试另一种:

$("#show").removeAttr("style"); $("#show").attr("style","");

二、JS/jQuery添加或移除CSS样式

//通过JS添加样式+移除样式document.getElementById('tab1').style.display="none";document.getElementById("tab1").removeAttribute("style");//通过jQuery添加样式+移除样式// $("#tab1").css("display","none");// $("#tab1").removeAttr("style","");

三、实例

<!doctype html><html><head><meta charset="utf-8"><title>信息管理</title><!--通知ie使用最新内核--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--响应式,约束缩放--><meta name="viewport" content="width=device-width, maxinum-scale=1,user-scalable=no,initial-scale=1"><link rel="stylesheet" href="/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="/jquery/2.1.1/jquery.min.js"></script><script src="/bootstrap/3.3.7/js/bootstrap.min.js"></script><style>body{background:#eee;}#main{max-width:640px; font-family:"微软雅黑"; }/*头部*/.tou{background:#fff; margin-top:20px; padding-top:13px; padding-bottom:13px;}/*头部左边*/.tou .tou-left{margin-left:15px;}.tou .tou-left a{}.tou .tou-left img{width:78px; height:78px;}/*头部右边*/.tou .tou-right{position:relative; float:left; margin-left:20px;}.tou .tou-right h3{font-size:18px; margin-top:3px; margin-bottom:8px;}.tou .tou-right p{font-size:14px; color:#999; margin-bottom:5px;}.tou .tou-right .self-depart{margin-bottom:0px;}/*采集和已采集连接*/.self-nav{margin-top:20px; background:#fff; ;}.self-nav .col-xs-6{padding-left:0; padding-right:0; margin-left:0; margin-right:0; }.self-nav .btn{padding-top:10px; padding-bottom:10px;}/*采集列表*/.self-menu{margin-top:20px; background:#fff;border-top:1px solid #fff; border-bottom:1px solid #fff; }.self-menu .self-menu-cont li{border-bottom:1px solid #eee;}.self-menu .self-menu-cont li .self-danger{background:#C00;}/*底部技术支持*/.self-footer{margin-top:20px; background:#fff; padding-top:13px; padding-bottom:13px; }.self-footer p{margin-bottom:0; font-size:12px; color:#666; text-align:center;}</style></head><body><div class=" container" id="main"><!--头部--><div class="row tou"><div class=" pull-left tou-left"><a href="./"><img src="" class="img-responsive"/></a></div><div class=" tou-right"><h3>张三</h3><p>微信号:zhangsan</p><p class="self-depart">部门:安全部</p></div></div><!--banner--><div class="row self-nav"><div class="col-xs-6"><a href="#tab1" class="btn btn-block btn-default" data-toggle="tab" id="send" onclick="hiddenTag()">信息列表</a></div><div class="col-xs-6"><a href="#tab2" class="btn btn-block btn-default" data-toggle="tab" onclick="showTag()">添加信息</a></div></div><!--菜单列表--><div class="row self-menu"><ul class="nav nav-pills nav-stacked self-menu-cont tab-pane active fade in" id="tab1"><li><a href="">信息列表<span class="badge pull-right">10</span></a></li><li><a href="">消息列表<span class="badge pull-right">10</span></a></li><li><a href="">留言列表<span class="badge pull-right">10</span></a></li><li><a href="">传达列表<span class="badge pull-right">10</span></a></li><li><a href="">通知列表<span class="badge pull-right">10</span></a></li></ul><ul class="nav nav-pills nav-stacked self-menu-cont tab-pane fade" id="tab2" style="display:none"><li><a href="">添加信息</a></li><li><a href="">添加消息</a></li><li><a href="">添加留言</a></li><li><a href="">添加传达</a></li><li><a href="">添加通知</a></li></ul></div></div> </body><script>function hiddenTag(){//通过JS添加样式+移除样式document.getElementById('tab1').style.display="block";document.getElementById('tab2').style.display="none";//通过jQuery添加类选择器和移除类选择器$("#add").removeClass("btn-primary");$("#add").addClass("btn-default");$("#send").removeClass("btn-default");$("#send").addClass("btn-primary");//通过jQuery添加样式+移除样式// $('#tab1').css("display","block");// $('#tab2').css("display","none");}function showTag(){//通过JS添加样式+移除样式document.getElementById('tab1').style.display="none";document.getElementById("tab2").removeAttribute("style");//通过jQuery添加类选择器和移除类选择器$("#send").removeClass("btn-primary");$("#send").addClass("btn-default");$("#add").removeClass("btn-default");$("#add").addClass("btn-primary");//通过jQuery添加样式+移除样式// $("#tab1").css("display","none");// $("#tab2").removeAttr("style","");}</script></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。