표시 또는 가시성을 통해 HTML 요소를 표시하고 숨기는 방법-HTML 튜토리얼-php.cn

표시 또는 가시성을 통해 HTML 요소를 표시하고 숨기는 방법

php中世界最好的语言

풀어 주다： 2018-02-08 09:46:59

원래의

3603명이 탐색했습니다.

이번에는 display 또는 visibility를 통해 HTML 요소를 표시하고 숨기는 방법을 보여 드리겠습니다. 표시 또는 가시성을 통해 HTML 요소를 구현하고 숨기기 위한 주의사항은 무엇입니까? 사건을 봐.

때때로 특정 조건에 따라 웹 페이지의 HTML 요소를 표시할지 숨길지를 제어해야 하는 경우가 있는데, 이는 표시 또는 가시성을 통해 달성할 수 있습니다. 다음 예제를 통해 표시와 가시성의 차이점을 알아보세요.

<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==&#39;block&#39;) div1.style.display=&#39;none&#39;; 
else div1.style.display=&#39;block&#39;; 
if(div2.style.display==&#39;block&#39;) div2.style.display=&#39;none&#39;; 
else div2.style.display=&#39;block&#39;; 
} 
function showAndHidden2(){ 
var div3=document.getElementById("div3"); 
var div4=document.getElementById("div4"); 
if(div3.style.visibility==&#39;visible&#39;) div3.style.visibility=&#39;hidden&#39;; 
else div3.style.visibility=&#39;visible&#39;; 
if(div4.style.visibility==&#39;visible&#39;) div4.style.visibility=&#39;hidden&#39;; 
else div4.style.visibility=&#39;visible&#39;; 
} 
</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>

로그인 후 복사

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 관련 기사를 참조하세요. PHP 중국어 웹사이트!