使用jquery控制style、css、div属性attr的值显示隐藏的多种方法总结

最新推荐文章于 2022-11-13 16:00:06 发布

徊忆羽菲

最新推荐文章于 2022-11-13 16:00:06 发布

阅读量3.3k

点赞数

分类专栏： Javascript Html Jquery

本文链接：https://blog.csdn.net/guo_qiangqiang/article/details/103137739

版权

Html 同时被 3 个专栏收录

254 篇文章 9 订阅

订阅专栏

Javascript

235 篇文章 6 订阅

订阅专栏

Jquery

192 篇文章 2 订阅

订阅专栏

主要介绍了JQuery显示、隐藏div的几种方法简明总结,本文总结了控制style、控制CSS、JQuery自带方法等几种显示、隐藏div的方法

例子

$("#qipa250notice").css("display", "block");//第1种方法 
$("#qipa250notice").attr("style", "display:block;");//第2种方法 
$("#qipa250notice").show();//第3种方法

给元素换class，来实现隐藏div

给元素换class，来实现隐藏div，前提是换的class样式定义好了隐藏属性

$("#qipa250Num").attr("class", "n_input3");

给元素设置style属性

$("#qipa250notice").attr("style", "display:block;");

通过jquery的css方法，设置div隐藏

$("#qipa250Num").css("display", "none");

通过jquery的show()、hide()方法，设置div隐藏

$("#qipa250Div").show();//显示div 
$("#imgDiv").hide();//隐藏div

代码

1、$("#qipa250demo").attr("style","display:none;");//隐藏div
   $("#qipa250demo").attr("style","display:block;");//显示div
2、$("#qipa250demo").css("display","none");//隐藏div
   $("#qipa250demo").css("display","block");//显示div
3、$("#qipa250demo").hide();//隐藏div
   $("#qipa250demo").show();//显示div
4、$("#qipa250demo").toggle(
       function () {
            $(this).attr("style","display:none;");//隐藏div
       },
       function () {
            $(this).attr("style","display:block;");//显示div
       }
   );