표시 또는 가시성을 통해 HTML 요소를 표시하고 숨기는 방법
- php中世界最好的语言원래의
- 2018-02-08 09:46:593610검색
이번에는 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=='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>이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 관련 기사를 참조하세요. PHP 중국어 웹사이트!
관련 읽기:
HTML에서 여러 클래스 속성을 정의하는 것은 유효하지 않습니다.
위 내용은 표시 또는 가시성을 통해 HTML 요소를 표시하고 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.