자바스크립트에서 버튼 숨기기 div를 구현하는 방법-JS 튜토리얼-php.cn

자바스크립트에서 버튼 숨기기 div를 구현하는 방법

藏色散人

풀어 주다： 2023-01-07 11:44:01

원래의

2512명이 탐색했습니다.

JavaScript에서 버튼 숨기기 div를 구현하는 방법: 먼저 프런트 엔드 샘플 파일을 만든 다음 id 버튼을 기반으로 클릭 이벤트를 가져오고 마지막으로 이벤트 핸들러 기능을 추가합니다.

자바스크립트에서 버튼 숨기기 div를 구현하는 방법

이 문서의 운영 환경: windows7 시스템, javascript1.8.5&&html5 버전, DELL G3 컴퓨터

JavaScript 버튼을 클릭하면 div 메서드를 숨기고 표시할 수 있습니다

클릭하세요 id 버튼에 따른 이벤트, 이벤트 처리 기능 추가
효과:
자바스크립트에서 버튼 숨기기 div를 구현하는 방법

<style>
		#dv{
			width: 100px;
			height: 100px;
			background-color: royalblue;
		}
	</style>
	<body>
		<input type="button" value="隐藏" id="btn"/>
		<!--<input type="button" value="显示" id="btn1"/>-->
		<p id="dv"></p>
		<script>
			function my(id){
				return document.getElementById(id);
			}
			//第一种方法
			/*my("btn").onclick=function(){
				my("dv").style.display="none";
			}
			my("btn1").onclick=function(){
				my("dv").style.display="block";
			}*/
			//第二种方法
			my("btn").onclick=function(){
				if (this.value =="隐藏") {
					my("dv").style.display="none";
					this.value="显示";
				} else if(this.value =="显示"){
					my("dv").style.display="block";
					this.value="隐藏";
				}
			}
		</script>
	</body>

로그인 후 복사

추천 학습: "javascript Advanced tutorial"

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