찾다

집  >  기사  >  웹 프론트엔드  >  HTML에서 요소의 표시 및 숨기기를 제어하는 ​​방법

HTML에서 요소의 표시 및 숨기기를 제어하는 ​​방법

coldplay.xixi
coldplay.xixi원래의
2021-03-04 13:44:2811600검색

HTML 요소의 표시 및 숨기기를 제어하는 ​​방법: 1. 표시 방법을 사용하여 숨깁니다. 코드는 [div1.style.display='none']입니다. 2. 표시 방법을 사용하여 표시합니다. 코드는 [ div3.style.visibility='숨김'].

HTML에서 요소의 표시 및 숨기기를 제어하는 ​​방법

이 튜토리얼의 운영 환경: 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==&#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" ο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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML에서 표 셀 색상을 설정하는 방법다음 기사：HTML에서 표 셀 색상을 설정하는 방법

관련 기사

더보기