스타일 변경하기

*요소가 하나일때

문법
변수명.style.color = '색상';
----------------------------------------------------

활용
var firstTitle = document.getElementById('title');

firstTitle.style.color = 'red';

 

 

*요소가 배열일때 (다수) - 반복문 사용

html에 paragraph가 다수가 있을경우
console.log로 확인해 보면 배열로 나온다. 


var paragraphs = document.getElementsByTagName('p');
console.log(paragraph);

//콘솔 값
HTMLCollection [ 0: p, 1: p, 2: p, 3: p, length: 4 ]

-----------------------------------------------------------------


//반복문 사용하지 않을시
paragraph[0]style.color = 'red'
paragraph[1]style.color = 'red'
paragraph[2]style.color = 'red'
paragraph[3]style.color = 'red'
-----------------------------------------------------------------



//반복문 사용
for(var i = 0; i <= paragraph.length; i++) {
	paragraph[i]style.color = 'red';
}

※반복문을 사용하지 않을 경우 p요소를 추가할때마다 스크립트도 추가와 수정을 해야한다.

  반복문을 사용하면 추가할때마다 자동으로 적용됨