[置顶] javascript实现层div的显示和隐藏效果

javascript实现层div的显示和隐藏效果,用javascript设置style display属性为block(显示)和none(隐藏),代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>javascript实现层div的显示和隐藏效果</title>
<script type="text/JavaScript">
	function toggle(targetid)
	{
		if (document.getElementById)
		{
			target=document.getElementById(targetid);
			hideShowButtonObj=document.getElementById('butn');
			if (target.style.display=="block")
			{
				target.style.display="none";
				hideShowButtonObj.value="+Show"
				hideShowButtonObj.style.fontWeight = "bold";
			} 
			else 
			{
				hideShowButtonObj.value="-Hide"
				hideShowButtonObj.style.fontWeight = "bold";
				target.style.display="block";
				target.style.marginLeft = "50px";
			}
		}
		window.event.cancelBubble = true;
		return false;
	}
</script>
<style type="text/css">
	#helloworld
	{
		FONT-SIZE: x-small;  
		WIDTH: 100%; 
		COLOR: #555555
	}
	#butn
	{
		FONT-WEIGHT: bold
	}
</style>
</head>
<body>
	<input type="button" id="butn" value="+Show" onclick="toggle('helloworld')">
	</input>
	<div style="display:none" width="100%" class="ValueText" id="helloworld">
	Hello<br>
	World<br>
	</div>
</body>
</html>


你可能感兴趣的:([置顶] javascript实现层div的显示和隐藏效果)