JS DOM style(CSS) 변경 / 접근

JS를 이용해 DOM 엘리먼트의 CSS style을 변경할 수 있다.

단, JS에서 스타일을 바꾸는 것은 속도에 영향을 줄 수 있기 때문에 CSS로 가능한 경우에는 CSS를 이용하는게 좋다.

 

나는 함수로 전달된 값을 이용해 스타일을 지정해야 했기 때문에 JS를 이용해 스타일을 편집했다.

---

style 속성값 변경

1. style

let exampleValue = 10;
const element = document.getElementById('test');

element.style.left = exampleValue + "px";

엘리먼트의 left 속성값을 exampleValue로 설정하는 코드다.

 

2. style.cssText

const element = document.getElementById('test');

element.style.cssText = 'left: 0; top: 0;'

엘리먼트의 left 속성값을 0, top 속성값을 0으로 설정하는 코드다. cssText를 사용하면 한 번에 여러 속성을 주가할 수 있다.

앞서 말했듯 이런 코드는 CSS에서 직접 설정해 주는 것이 좋지만, 만약 박스를 클릭할 때 위치를 옮겨야 하는 경우라면 위처럼 작성할 수 밖에 없을 것이다.

 

주의할 점은 style을 사용하면 기존에 정의된 스타일에 새로운 속성이 추가되고, style.cssText를 사용하면 기존에 정의된 스타일은 지워지고 새로 덮어 씌워진다는 점이다.

 

---

style 속성값 접근

const color = element.style.color;

//or

const color = getComputedStyle(element).color;

style 속성을 이용하거나 getComputedStyle() 메서드를 이용해 엘리먼트의 스타일을 읽어올 수 있다.

style 속성을 이용하면 inline으로 정의된 스타일 속성만 읽어오고, getComputedStyle() 메서드를 이용하면 <style> 및 class속성, css 파일로 정의된 style 속성을 모두 읽어온다.