欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

关于设置div隐藏的小案例

程序员文章站 2022-04-28 14:13:20
...

在引入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返回的未必是需要的值。

 

 

 

 

 

 

 

 

 

相关标签： div display attr prop

上一篇： 皇帝要斩算命先生，术士：有本事你再等我19天

下一篇： Win2000+Apache+MySql+PHP4+PERL安装使用小结

推荐阅读