집 >웹 프론트엔드 >JS 튜토리얼 >자바스크립트에서 div를 표시하고 숨기는 방법

자바스크립트에서 div를 표시하고 숨기는 방법

coldplay.xixi원래의: 2021-04-08 11:46:1215511검색

JavaScript에서 숨겨진 div를 표시하는 방법: 먼저 새 파일을 만들고 버튼 버튼을 만든 다음 숨겨진 div를 만들고 div에 숨겨진 스타일을 설정합니다. 마지막으로 버튼 버튼에 대한 클릭 숨기기 이벤트를 추가합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, DELL G3 컴퓨터.

Javascript에서 div를 표시하고 숨기는 방법:

1 html 개발 소프트웨어를 열고 새 html 파일을 만듭니다. 그림과 같이

자바스크립트에서 div를 표시하고 숨기는 방법

2.html 파일에 버튼 버튼을 생성한 후 버튼에 ID를 설정합니다. 이 경우 표시할 버튼의 ID를 설정합니다. 그림과 같이:

코드:

<input type="button" id="show" value="显示隐藏div" />

자바스크립트에서 div를 표시하고 숨기는 방법

3. 그런 다음 숨겨진 div를 만들고 이 div에 숨겨야 하는 콘텐츠를 작성한 다음 이 div의 ID를 설정하고 케이스 ID를 다음으로 설정합니다. 케이스에 숨어 있습니다. 그림과 같이:

코드:

<div id="hide">我是隐藏的div</div>

자바스크립트에서 div를 표시하고 숨기는 방법

4. div에 숨겨진 스타일을 설정합니다.

태그 뒤에 id에 대한 스타일 display:none을 hide로 설정하면 id가 hide인 div가 숨겨집니다. 그림과 같이: <p>스타일 코드: </p><pre class="brush:php;toolbar:false"><style> #hide{display: none;padding-top: 15px;} </style></pre><p><img src="https://img.php.cn/upload/image/718/309/380/1617853544958635.png" title="1617853544958635.png" alt="자바스크립트에서 div를 표시하고 숨기는 방법"></p> <p>5. 버튼 버튼에 대한 클릭 숨기기 이벤트를 추가합니다. 버튼 버튼 클릭 후 숨겨진 div 표시를 block으로 변경하여 클릭 후 해당 div가 표시되도록 합니다. 그림과 같이: </p> <p>이벤트 코드: </p><pre class="brush:php;toolbar:false"><script type="text/javascript"> window.onload = function(){ document.getElementById("show").onclick = function(){ document.getElementById("hide").style.display = "block"; } } </script></pre><p><strong><img src="https://img.php.cn/upload/image/886/167/729/1617853555861705.png" title="1617853555861705.png" alt="자바스크립트에서 div를 표시하고 숨기는 방법"></strong></p> <blockquote><p><strong>관련 무료 학습 권장 사항: </strong><a href="https://www.php.cn/course/list/17.html" target="_blank" textvalue="javascript视频教程"><strong>javascript 비디오 튜토리얼</strong></a></p></blockquote>

위 내용은 자바스크립트에서 div를 표시하고 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：자바스크립트에서 시간을 설정하는 방법다음 기사：자바스크립트에서 시간을 설정하는 방법