HTML 요소의 표시 및 숨기기를 제어하는 방법: 1. 표시 방법을 사용하여 숨깁니다. 코드는 [div1.style.display='none']입니다. 2. 표시 방법을 사용하여 표시합니다. 코드는 [ div3.style.visibility='숨김'].
이 튜토리얼의 운영 환경: windows7 시스템, html5 버전, DELL G3 컴퓨터.
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=='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" οnclick="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" οnclick="showAndHidden2();" value="DIV切换" /> </body> </html>
관련 학습 권장 사항: html 비디오 튜토리얼
위 내용은 HTML에서 요소의 표시 및 숨기기를 제어하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!