关于设置div隐藏的小案例
在引入Jquery 1.6(+)的情况下，动态设置div隐藏显示的小案例
html代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <!--引入jquery文件--> <script src="../jquery-1.6.4.js"></script> </head> <body> <div id="myDiv" title="wode" style="width:100px;height:100px;background:red;" ></div> <input type="button" id="hiddenBtn" value="hidden" > <input type="button" id="showBtn" value="show" > </body> </html>
相应的js代码：
<script>
$(document).ready(function(){
$("#hiddenBtn").click(function(){
//方式1：原生态html dom方式
//document.getElementById("myDiv").style.display="none";
//方式2：通过css样式
//$("#myDiv").css({display:"none",background:"blue"});
//方式3：通过jquery api方法hide()
//$("#myDiv").hide();
//方式4：通过设置attr
$("#myDiv").attr("style","display:none");//将会丢失style的其他的值，显示的时候需要重新设置原有样式，不好用。
//方式5：通过设置prop(有问题，通过测试$("#myDiv").prop("style")返回的是CSSStyleDeclaration对象)
//$("#myDiv").prop("style","display:none") //无效，暂时不知怎么解决。
});
$("#showBtn").click(function(){
//方式1：原生态html dom方式
document.getElementById("myDiv").style.display="block";
//方式2：通过设置css样式
//$("#myDiv").css({display:"block",background:"blue"});
//方式3：通过jquery api方法hide()
//$("#myDiv").hide();
//方式4：通过设置attr
$("#myDiv").attr("style","display:block;width:100px;height:100px;background:red");
//方式5：通过设置prop
//$("#myDiv").prop("style","display:block") //将返回CSSStyleDeclaration,暂时无效
});
});
</script>其中比较完全可行的是前三种方式；
而通过attr设置style属性时，将会丢失原有的样式，因此不大好用，而通过prop方式设置style则返回的东西视乎不是我们想要的，暂时舍弃，推荐使用前三种方式。
在使用jquery1.6（+）是对于标签的固有属性最好使用prop方式：
因为标签可以自定义属性，我获取自定义属性的时候,采用attr方式。
如：<a href="a.html" title="aaa" />
当需要取 href属性时，采用$("a").prop("href");
当取自定义属性title时 ，采用 $("a").attr("title");
对于属性值为true和false的，如checkbox , select ,标签用prop,用attr返回的未必是需要的值。
相关推荐
89510194 2019-12-31
开心就好 2019-08-27
xiaohuli 2019-06-29
libowen0 2018-06-04
hhhkhhh 2017-07-20
83510998 2015-08-18
dangzhangjing 2019-06-27
语帆 2015-04-15
小肖 2014-07-16
teresalxm 2014-04-30
CoderChang 2014-04-30
hjfbluesky 2014-03-05
83443560 2013-09-06
统一开发环境UDE 2013-02-05
JeWangZhe 2012-08-30