明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

如何通過display或visibility來完成HTML元素的顯示與隱藏

發(fā)表時間：2024-05-02 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]這次給大家?guī)砣绾瓮ㄟ^display或visibility來實現(xiàn)HTML元素的顯示與隱藏，通過display或visibility來實現(xiàn)HTML元素的顯示與隱藏的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。有些時候我們需要根據(jù)某些條件來控制Web頁面中的HTML元素顯示還是隱藏，可以通過dis...
這次給大家?guī)砣绾瓮ㄟ^display或visibility來實現(xiàn)HTML元素的顯示與隱藏，通過display或visibility來實現(xiàn)HTML元素的顯示與隱藏的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

有些時候我們需要根據(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>

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

HTML中定義多個class屬性無效

html里怎樣實現(xiàn)異步上傳文件

以上就是如何通過display或visibility來實現(xiàn)HTML元素的顯示與隱藏的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。