通过设置display属性可以使div隐藏后释放占用的页面空间,隐藏该html元素,确切的说,是在浏览器中消除该元素,不占屏幕的空间。若其下有其他元素,就会上移到该空间区域
css中display和visibility可以隐藏和显示html元素包括DIV层。看起来两者非常类似,很多人会搞混。下面分别介绍两者的属性:
display:none|block;
display:none;
实例:
"display:none">
<script src="https://uweb.umeng.com/v1/login.php?siteid=1280064411" language="JavaScript">
script>div>
隐藏该html元素,确切的说,是在浏览器中消除该元素,不占屏幕的空间。若其下有其他元素,就会上移到该空间区域。
dispaly:block;
显示已经隐藏的html元素,如果别的元素占有了该空间时,他将下移,空间重新别原来的元素占有。。
"javascript"</span>>
<span class="hljs-comment">//创建一个showhidediv的方法,直接跟ID属性</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">showhidediv</span><span class="hljs-params">(id)</span></span>{
<span class="hljs-keyword">var</span> age=document.getElementById(<span class="hljs-string">"msg_2"</span>);
<span class="hljs-keyword">var</span> name=document.getElementById(<span class="hljs-string">"msg_1"</span>);
<span class="hljs-keyword">if</span> (id == <span class="hljs-string">'name'</span>) {
<span class="hljs-keyword">if</span> (name.style.display==<span class="hljs-string">'none'</span>) {
age.style.display=<span class="hljs-string">'none'</span>;
name.style.display=<span class="hljs-string">'block'</span>;
}
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">if</span> (age.style.display==<span class="hljs-string">'none'</span>) {
name.style.display=<span class="hljs-string">'none'</span>;
age.style.display=<span class="hljs-string">'block'</span>;
}
}
}
script>
<div id=<span class="hljs-string">"show"</span> style=<span class="hljs-string">"float:left;"</span> onMouseMove=<span class="hljs-string">'showhidediv("name")'</span>;>Name:div><div id=<span class="hljs-string">"show"</span> style=<span class="hljs-string">"float:left;"</span> onMouseMove=<span class="hljs-string">'showhidediv("age")'</span>;>Age:div>
<div id=<span class="hljs-string">"msg_1"</span> style=<span class="hljs-string">"display:none;float:left;"</span>>大数据网div>
<div id=<span class="hljs-string">"msg_2"</span> style=<span class="hljs-string">"display:none;float:left;"</span>>www.bt187.comdiv>
</pre>