JavaScript
|
2018. 6. 8. 10:34
[자바스크립트] DOM 객체 스타일(style) 변경하기
이전글
DOM 객체 스타일(style) 변경하기
DOM API를 이용하여 요소의 스타일을 변경할 수 있습니다. h1의 스타일을 변경해보겠습니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="h1Tag">Dom</h1>
</body>
</html>
DOM 객체의 속성에는 style이라는 속성이 존재하는데 이 속성은 요소의 style 정보들을 담고 있는 객체입니다.
h1 태그의 텍스트 색상과 배경색을 변경해 보았습니다.
<script>
window.onload = function () {
var h1_tag = document.getElementById('h1Tag');
h1_tag.style.color = 'red';
h1_tag.style.backgroundColor = 'green';
}
</script>
style 객체의 속성으로는 우리가 평소에 사용하는 CSS 속성값들을 사용할 수 있는데 주의할 점은 자바스크립트의 식별자로는 -를 사용할 수 없기 때문에 CSS 속성명에서 -를 지우고 첫 글자를 대문자로 변경해야 한다는 점입니다.
background-color → style.backgroundColor
또한 자바스크립트 문법에 맞게 다음과 같이 속성을 사용할 수도 있습니다. 이때에는 -를 사용할 수도 있고 사용하지 않는 방법까지 두 가지 표현이 모두 가능합니다.
h1_tag.style['background-color'] = 'green';
h1_tag.style['backgroundColor'] = 'green';
'JavaScript' 카테고리의 다른 글
| [자바스크립트] CSS 선택자를 이용한 DOM 탐색하기 - 고급편 (0) | 2018.06.08 |
|---|---|
| [자바스크립트] 자바스크립트 DOM 요소 제거하기 (0) | 2018.06.08 |
| [자바스크립트] DOM 객체 innerHTML 속성 (0) | 2018.06.08 |
| [자바스크립트] DOM 노드 ID, 태그명, name 속성으로 탐색하기 (0) | 2018.05.31 |
| [자바스크립트] DOM이란? DOM 개념 및 자바스크립트 DOM 다루기 (0) | 2018.05.31 |
도로락
WriterIT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그