JavaScript 코스

style 속성

개요

HTML에서 style 속성을 이용하면 CSS의 속성을 태그에 직접 설정할 수 있었습니다.
JavaScript에서도 비슷하게 QuerySelector로 가져온 노드에서 style속성을 참조하며 CSS 속성을 적용시킬 수 있습니다.

CSS에서 여러 단어로 이어진 속성은 -로 구분되었는데(ex. background-color), JavaScript에서는 -를 사용하지 않고 다음 단어를 대문자로 사용하며(Camel Case) 접근합니다. (ex. backgroundColor)

사용법

var box = document.getElementById("box");
box.style.backgroundColor = "red";

예제

<html>
<head>
	<script type="text/javascript">
		function changeColor() {
			var box = document.getElementById("box");
			var r = parseInt(Math.random() * 256);
			var g = parseInt(Math.random() * 256);
			var b = parseInt(Math.random() * 256);

			box.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
		}
	</script>
	<style>
		#box{
			cursor: pointer;
			width:80px;
			height:80px;
			background-color:#ccc;
		}
	</style>
</head>
<body>
	<div>click to change color</div>
	<div id="box" onclick="changeColor()"></div>
</body>
</html>