cari

Rumah >hujung hadapan web >tutorial js >JS 控制隐藏显示

JS 控制隐藏显示

不言
不言asal
2018-04-26 14:29:111856semak imbas

这篇文章给大家分享的是一个比较简单的JS 控制隐藏显示的代码，有需要的朋友可以看一下

比较简单的实现.style.display就是控制层隐藏或显示的属性.

<html>
<body>
<script>
function show(){
document.getElementById("p").style.display="";
//alert(document.getElementById("p").style.display)
}
function hidden(){
document.get
ElementById("p").style.display="none";
//alert(document.getElementById("p").style.display)
}
</script>
<BODY>
<input name="name" type="button" onClick="show();" value="显示">
<p id="p" style="display: none" onMouseout="hidden();">
show it
</p>
</BODY>
</HTML>

p的visibility可以控制p的显示和隐藏，但是隐藏后页面显示空白

style="visibility: none;"
document.getElementById("typep1").style.visibility="hidden";//隐藏
document.getElementById("typep1").style.visibility="visible";//显示


通过设置display属性可以使p隐藏后释放占用的页面空间，如下

style="display: none;"
document.getElementById("typep1").style.display="none";//隐藏
document.getElementById("typep1").style.display="";//显示

如果用p.style.display="none"隐藏会引起，p里面的东西休眠，里面的事件就不响应了




Atas ialah kandungan terperinci JS 控制隐藏显示 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：AngularJS前端js框架Artikel seterusnya：AJAX跨域请求数据方法归纳(实战讲解)

Artikel berkaitan

Lihat lagi