[JavaScript] onClick 시 나타났다 사라지기 / display:none 과 display:block 이용하기

 

먼저 css의 상태

div{
	border:1px solid black;
	width:300px;
	height:100px;
	display:none;
}

 

 

body내용

<div id="divId">
test
</div>
<button onClick="mycl1()">click</button>

 

마지막 script내용

<script>

	let id = document.getElementById("divId");

function mycl1(){

	if(id.style.display=="block"){
		id.style.display="none";
	}
	else {
		id.style.display="block";
	}
}
</script>

 

🤔코드 복습

if(id.style.display=="block"){
id.style.display="none";
}

 

👉 id(앞에 만들어놓은 객체) 의 style 의 display 속성이 block이면 

id(앞에 만들어놓은 객체) 의 style 의 display 속성을 none으로 바꿔라!

else {
id.style.display="block";
}

---

 

🙄 문득 든 생각 

 let id= document.getElementById를 사용하지 않고

id값만을 이용해서 divId.style.display 라고 해도 상관이 없을까?

 

선생님의 답변)

상관없다고 하셨당 :) !