때때로 우리는 특정 조건에 따라 웹 페이지의 HTML 요소를 표시할지 숨길지를 제어해야 하며, 이는 표시 또는 가시성을 통해 달성할 수 있습니다. 다음 예시를 통해 표시와 가시성의 차이를 이해해 보세요.
HTML 요소 표시 및 숨기기<br><script type="text/javascript "></script>function showAndHidden1(){ <br>var div1=document.getElementById("div1") <br>var div2=document.getElementById("div2"); if(div1.style.display=='block') div1.style.display='none'; <br>else div1.style.display='block' <br>if(div2.style.display==' block') div2.style .display='none'; <br>else div2.style.display='block'; <br>} <br>function showAndHidden2(){ <br>var div3=document.getElementById(" div3"); <br>var div4=document.getElementById("div4"); <br>if(div3.style.visibility=='visible') div3.style.visibility='hidden'; <br>else div3 .style.visibility=' 표시'; <br>if(div4.style.visibility=='visible') div4.style.visibility='hidden' <br>else div4.style.visibility='visible'; 🎜>} <br> </script> <br></head> <br><body> <br><div>display: 요소의 위치가 비어 있습니다.</div> <div id="div1 " style="display:block;">DIV 1</div> <br><div id="div2" style="display:none;">DIV 2</div> ; <br /><input type="button" onclick="showAndHidden1();" value="DIV 전환" /> <br><hr> <br><div>visibility: 요소의 위치 아직 사용 중입니다</div> <br><div id="div3" style="visibility:visible;">DIV 3</div> <br><div id="div4" style="visibility: Hidden;">DIV 4< /div> <br><input type="button" onclick="showAndHidden2();" value="DIV 토글" /> <br></body> <br> <br> <br>
</div>
