13.DOM - 문서객체 스타일 조작 및 제거

2013. 4. 16. 10:59

1. style 속성을 사용하면 문서객체의 스타일을 변경할수 있다.

<!DOCTYPE html>

<html>

<head>

<title>INDEX</title>

window.onload = function(){

//문서객체가져오기

var header = document.getElementById('header');

header.style.border = '2px solid black';

header.style.color ='red';

};

</script>

</head>

<body>

<h1 id="header">Header1</h1>

</body>

</html>

* css와 속성이름이 다름.

자바스크립트 식별자에는 '-'를 사용할수 없으므로, css의 background-color 는 backgroundColor 속성으로 .

2. 문서 객체 제거

- removeChild(child) : 문서객체의 자식노드를 제거

<!DOCTYPE html>

<html>

<head>

<title>INDEX</title>

window.onload = function(){

//문서객체가져오기

var hd_remove = document.getElementById('hd_remove');

document.body.removeChild(hd_remove);

};

</script>

</head>

<body>

<h1 id="hd_remove">Header1</h1>

</body>

</html>

일반적으로

hd_remove.parentNode.removeChild(hd_remove); 로 사용한다.

h1태그에서 부모노드로 이동한 후 부모노드에서 자식노드를 삭제한다.

New