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>