关于js控制页面“显示、隐藏”元素

HBWanghj

于 2011-11-14 15:26:04 发布

阅读量156

点赞数

CC 4.0 BY-SA版权

文章标签： block 换行

本文链接：https://blog.youkuaiyun.com/HBWanghj/article/details/84082015

本文详细介绍了在HTML页面中利用JavaScript控制页面元素显示与隐藏的方法，包括使用display属性的不同值（inline与block）带来的效果差异，并通过实例展示了如何实现元素的动态显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在html页面中遇到js控制“显示、隐藏”页面元素时的方法，先贴上代码：

<html>
<body> 
<div   id= "divID"   style= "display:inline"> 
测试 
</div> 
<input type=button value= "显示" onclick='document.getElementById("divID").style.display="inline"'> 
<input type=button value= "隐藏" onclick='document.getElementById("divID").style.display="none"'> 
</body>
</html>

注意，这里使用display属性的inline，而不用block，是因为在html描述中：
block：此元素将显示为块级元素，此元素前后会带有换行符。
inline：默认。此元素会被显示为内联元素，元素前后没有换行符。
即使用block会出现换行。代码：


<html>
<body> 
<div   id= "divID"   style= "display:block"> 
测试 
</div> 
<input type=button value= "显示" onclick='document.getElementById("divID").style.display="block"'> 
<input type=button value= "隐藏" onclick='document.getElementById("divID").style.display="none"'> 
</body>
</html>