스타일 변경

• HTML 문서 파일에 적용된 CSS 스타일을 JS에서 변경할 수 있습니다.

• JS에서는 CSS와 다르게 대시같은 기호를 사용하지 않고 카멜케이스로 대체합니다.

1.1 인라인 방식으로 스타일 변경

• HTML 문서 파일 자체에서 인라인 스타일로 CSS를 적용하면, 브라우저 콘솔에서도
  h1에 관한 객체 구조에 스타일이 표시됩니다.

<!-- HTML 문서 파일 -->

 <h1 style="color: olive">Silkie Chickens</h1>

1.2 스타일시트로 스타일 변경

• HTML 문서 파일에 요소를 스타일시트로 변경하게 되면, 브라우저 콘솔에서는 객체구조에
  색상이 정의되지 않습니다.

/* 스타일 시트 */

h1 {
    color: olive;
}

1.3 객체로 접근해서 스타일 변경

• 브라우저 콘솔에서 JS를 이용해 객체 구조로 접근해서 스타일을 변경할 수 있다.
  이 같은 경우에도 인라인 형식처럼 객체 구조에 스타일이 정의됩니다.

• 이 방법 또한 HTML 문서 파일에서 인라인 스타일로 적용된 것과 동일하게 문서 파일에
  인라인으로 스타일이 정의됩니다.

1.4 편집기에서 스타일 변경

/* 문서 파일의 모든 a 요소에 대한 색상 변경 */

const allLink = document.querySelectorAll('a');

for (let link of allLink) {
    link.style.color = 'cyan';
}

위 방법들은 추천하지 않습니다.

인라인 스타일 같은 경우에는 HTML 마크업을 복잡하게 만들므로 권장하지 않고,
외부 스타일로서 CSS를 적용하면 객체구조에서는 정의되지 않기에 어떤
CSS를 적용했는지 CSS 파일 자체를 확인하기 전에는 확인할 수 없습니다.

getComputedstyle

• 해당 메소드는 인자로 전달받은 요소의 모든 CSS 속성값을 담은 객체를 회신합니다.

• 모든 스타일이 적용된 후에, 실제로 계산된 스타일을 가져오는 방식으로 객체 구조에서도
  값이 표시됩니다.

• window 전역 객체 하위에 존재합니다.

getComputedstyle() 메서드를 사용하면 특정 요소를 외부 스타일 시트에서 CSS로
정의하여도 해당 요소에 대한 모든 CSS 속성을 가져오므로 객체 구조에서 표시됩니다.