.png)
相關(guān)關(guān)鍵詞
關(guān)于我們
最新文章
- ThinkPHP 5.1、6.0、6.1 與 8.0 版本對比分析
- 涉嫌侵權(quán)的人只復(fù)制了版權(quán)軟件，沒有傳播給其他人，是否符合復(fù)制侵權(quán)的判定？
- 網(wǎng)站域名備案到企業(yè)名下后，即表明是商業(yè)使用了嗎？
- 軟件中使用了GPL & MIT 協(xié)議的文件 和 使用了 GPL | MIT 的有什么區(qū)別？
- 網(wǎng)站版權(quán)糾紛中的來源非法是否有嚴(yán)格的司法定義？
- [確定有效] ECSHOP后臺登錄不了的問題解決 https打不開
- 免費搜索代碼：如何利用百度做一個企業(yè)網(wǎng)站內(nèi)搜索？
- MySQL 中 HAVING 與 REPLACE 的用法解析
- 深入理解 MySQL 的連接操作：-h、-P、-u、-p 詳解
- 在 MySQL Workbench 中自定義導(dǎo)出文件格式的解決方案
通過display或visibility來實現(xiàn)HTML元素的顯示與隱藏
有些時候我們需要根據(jù)某些條件來控制Web頁面中的HTML元素顯示還是隱藏，可以通過display或visibility來實現(xiàn)。通過下面的例子了解display和visibility的區(qū)別，簡單的例子代碼如下：
<html>
<head>
<title>HTML元素的顯示與隱藏控制</title>
<script type="text/javascript">
function showAndHidden1(){
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
if(div1.style.display=='block') div1.style.display='none';
else div1.style.display='block';
if(div2.style.display=='block') div2.style.display='none';
else div2.style.display='block';
}
function showAndHidden2(){
var div3=document.getElementById("div3");
var div4=document.getElementById("div4");
if(div3.style.visibility=='visible') div3.style.visibility='hidden';
else div3.style.visibility='visible';
if(div4.style.visibility=='visible') div4.style.visibility='hidden';
else div4.style.visibility='visible';
}
</script>
</head>
<body>
<div>display：元素的位置不被占用</div>
<div id="div1" style="display:block;">DIV 1</div>
<div id="div2" style="display:none;">DIV 2</div>
<input type="button" onclick="showAndHidden1();" value="DIV切換" />
<hr>
<div>visibility：元素的位置仍被占用</div>
<div id="div3" style="visibility:visible;">DIV 3</div>
<div id="div4" style="visibility:hidden;">DIV 4</div>
<input type="button" onclick="showAndHidden2();" value="DIV切換" />
</body>
</html>
復(fù)制代碼
代碼如下:<html>
<head>
<title>HTML元素的顯示與隱藏控制</title>
<script type="text/javascript">
function showAndHidden1(){
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
if(div1.style.display=='block') div1.style.display='none';
else div1.style.display='block';
if(div2.style.display=='block') div2.style.display='none';
else div2.style.display='block';
}
function showAndHidden2(){
var div3=document.getElementById("div3");
var div4=document.getElementById("div4");
if(div3.style.visibility=='visible') div3.style.visibility='hidden';
else div3.style.visibility='visible';
if(div4.style.visibility=='visible') div4.style.visibility='hidden';
else div4.style.visibility='visible';
}
</script>
</head>
<body>
<div>display：元素的位置不被占用</div>
<div id="div1" style="display:block;">DIV 1</div>
<div id="div2" style="display:none;">DIV 2</div>
<input type="button" onclick="showAndHidden1();" value="DIV切換" />
<hr>
<div>visibility：元素的位置仍被占用</div>
<div id="div3" style="visibility:visible;">DIV 3</div>
<div id="div4" style="visibility:hidden;">DIV 4</div>
<input type="button" onclick="showAndHidden2();" value="DIV切換" />
</body>
</html>