[JavaScript] 자바스크립트에서 스타일 변경하기

152_자바스크립트에서 스타일 변경하기

[적용]

• 자바스크립트 처리 결과에 따라 스타일을 변경하고 싶을 때

---

[문법]

속성	의미	반환
요소.style.속성	스타일 값	문자열

---

[내용]

자바스크립트로 요소의 스타일 변경이 가능하며, 원하는 요소만을 지정하여 스타일에 변경을 주고 싶을 때 유용하다.

const box = document.querySelector('#box');
// 배경을 파란색으로 변경
box.style.backgroundColor = 'blue';

 

앞의 방법으로 CSS 코드의 스타일을 지정할 때의 속성 표기법은

케밥 케이스(Kebab-Case(-(하이픈)으로 단어를 연결하는 방법)가 아닌

카멜  케이스(CamelCase(첫 글자를 대문자로 하여 단어를 연결하는 방법)를 사용하므로 주의할 필요가 있다.

---

[예시]

이어서 #information 요소 스타일을 변경하는 예시안을 확인해 보자.

 

HTML                                                                                                                                                              index.html

<p id="information">Seoul Han River</p>

JavaScript                                                                                                                                                          main.js

const information = document.querySelector('#information');

// color 속성 변경
information.style.color = 'white';
// font-size 속성 변경
information.style.fontSize = '78px';
// font-weight 속성 변경
information.style.fontWeight = '600';

const strokeColor = '#c52b84';
// -webkit-text-stroke 속성 변경
information.style.webkitTextStroke = `2px ${strokeColor}`;
// text-stroke 속성 변경
information.style.textStroke = `2px ${strokeColor}`;
// text-shadow 속성 변경
information.style.textShadow = `7px 7px 0 #bf3384`;

 

실행결과

설정은 스타일 시트의 우선도가 높은 인라인(Inline) 스탕ㄹ과 같은 방식으로 지정된다.

<p id="information" style="color: white; font-size: 70px;
font-weight: 600; -webkit-text-stroke: 2px rgb(197, 43, 132); 
text-shadow: rgb(191, 51, 132) 7px 7px 9px;">
Seoul Han River</p>

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김