JS_javascript 기술의 style.display와 style.visibility의 차이점에 대한 설명 예

JS에서는 style.display 또는 style.visibility 속성을 설정하여 요소 표시 여부를 제어할 수 있습니다. style.display=block 및 style.visibility=visible인 경우 style.display=none 및 style인 경우 요소가 표시됩니다. visible= 숨기면 요소가 숨겨집니다. 이들 사이의 가장 큰 차이점은 style.display=none으로 숨길 때 요소가 원래 위치를 차지하지 않고 문서 흐름에서 분리되며 후속 요소가 해당 위치를 채운다는 것입니다. style.visibility=hidden을 통해 숨기면 요소는 여전히 원래 위치를 차지하지만 숨겨집니다.

다음 예는 이러한 차이점을 보여줍니다. 이 예에서는 divContent1과 divContent2가 style.display=none을 사용하여 숨겨집니다. 이때 다음 div는 위쪽으로 이동하여 이미 숨겨진 div 공간을 차지합니다. divContent3 및 divContent4는 style.visibility=hidden을 사용하여 숨기지만 숨겨진 후에도 여전히 원래 공간을 차지합니다.

<title>테스트</title> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <style> .titlediv{background-color: #505050;color:white;font-weight:bold;padding:10px;cursor:pointer } .contentdiv{border:3px solid #505050;height:100px;padding:10px; } </style> <div class="titlediv" onclick="toggle('divContetn1')"> </div>