이전글
DOM 객체 스타일(style) 변경하기
DOM API를 이용하여 요소의 스타일을 변경할 수 있습니다. h1의 스타일을 변경해보겠습니다.
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="h1Tag">Dom</h1>
</body>
</html> |
cs |
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> |
cs |
style객체의 속성으로는 우리가 평소에 사용하는 css 속성값들을 사용할 수 있는데 주의할점은 자바스크립트의 식별자로는 '-'를 사용할 수 없기때문에 css 속성명에서 '-'를 지우고 첫글자를 대문자로 변경해야 한다는 점 입니다.
|
background-color -> style.backgroundColor |
cs |
또한 자바스크립트 문법에 맞게 다음과 같이 속성을 사용할 수도 있습니다. 이때에는 '-'를 사용할 수도 있고 사용하지 않는 방법까지 두 가지 표현이 모두 가능합니다.
|
h1_tag.style['background-color'] = 'green';
h1_tag.style['backgroundColor'] = 'green'; |
cs |
'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 |
도로락
IT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그