JavaScript - element(버튼, div) 보이기 숨기기

Javascripthtml

visibility, display 속성 값을 변경하여 버튼, div 등, element들을 숨기거나, 보이도록 변경하는 방법을 소개합니다.

1. element 숨기기, 보이기 (display = none/block)

display 속성 값을 none으로 설정하면, 화면에서 element를 사라지게 하고, 자리도 차지하지 않게 만듭니다. 다시 보이게 하려면, 기존에 설정했던 값으로 재설정해주면 됩니다.

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
</head>
<body>

	<div>
		<button id="btn1">Button1</button>
	</div>
	<div>
		<button id="btn2">Button2</button>
	</div>
	<div>
		<button id="btn3">Button3</button>
	</div>
	<div>
		<button id="toggle" onclick="toggleButton()">Toggle</button>
	</div>

	<script>
		function toggleButton() {
			const button = document.getElementById('btn2');
			if (button.style.display === 'none') {
				button.style.display = 'block';
			} else {
				button.style.display = 'none';
			}
		}
	</script>

</body>
</html>

위 코드를 실행하고, 토글 버튼을 눌르면, 아래와 같이 Button2 버튼이 사라지고 버튼이 차지하는 자리도 함께 없어집니다. javascript show, hide element

2. element 숨기기, 보이기 (visibility = hidden/visible)

visibility 속성 값을 hidden으로 설정하면, 화면에서 element를 사라지게 하고, 자리도 차지하지 않게 만듭니다. 다시 보이게 하려면 visible로 변경해주면 됩니다.

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
</head>
<body>

	<div>
		<button id="btn1">Button1</button>
	</div>
	<div>
		<button id="btn2">Button2</button>
	</div>
	<div>
		<button id="btn3">Button3</button>
	</div>
	<div>
		<button id="toggle" onclick="toggleButton()">Toggle</button>
	</div>

	<script>
		function toggleButton() {
			const button = document.getElementById('btn2');
			if (button.style.visibility === 'hidden') {
				button.style.visibility = 'visible';
			} else {
				button.style.visibility = 'hidden';
			}
		}
	</script>

</body>
</html>

위 코드를 실행하고, 토글 버튼을 눌르면, 아래와 같이 Button2 버튼이 사라지지만 버튼이 차지하는 자리는 유지됩니다. javascript show, hide element

Loading script...

Related Posts

codechachaCopyright ©2019 codechacha