자바스크립트에서 버튼을 클릭하여 div를 숨기는 방법

방법: 1. "button object.onclick=function(){}" 문을 사용하여 클릭 이벤트 처리 함수를 버튼에 바인딩합니다. 2. 처리 함수에서 "div object.style.display="를 추가합니다. none"" 문; 3. 버튼을 클릭하면 처리 기능이 트리거되고 해당 문을 실행하면 div가 숨겨집니다.

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

javascript는 버튼을 클릭하여 div를 숨기는 기능을 구현합니다.

id 버튼에 따라 클릭 이벤트를 가져오고 이벤트 핸들러 기능을 추가합니다.

<input type="button" value="隐藏" id="btn"/>
<!--<input type="button" value="显示" id="btn1"/>-->
<div id="dv"></div>
<script>
	function my(id){
		return document.getElementById(id);
	}
	my("btn").onclick=function(){
			my("dv").style.display="none";
	}
</script>

렌더링:

div가 다음과 같은 경우에는 조금 더 복잡합니다. 표시되면 버튼을 클릭하여 숨기세요. div가 숨겨져 있으면 버튼을 클릭하여 표시할 수 있습니다.

<input type="button" value="隐藏" id="btn"/>
<!--<input type="button" value="显示" id="btn1"/>-->
<div id="dv"></div>
<script>
	function my(id){
		return document.getElementById(id);
	}
	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>

렌더링:

[추천 학습: javascript 고급 튜토리얼]

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