0°

如何利用div层隐藏指定内容代码

通过设置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>
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论