[JavaScript] 자바스크립트에서 CSS에 접근하는 방법

자바스크립트에서 css에 접근하기

자바스크립트로 CSS의 특정 속성을 제어하고 싶다면 먼저 제어하고 싶은 대상을 불러와야한다.
이후 제어할 수 있는 속성이나 메서드를 활용하면 CSS 속성을 제어할 수 있다.

1. style 속성

대상을 불러온 뒤 CSS에 접근을 할 때는 document 객체에 포함되어있는 style 속성을 이용한다.
style을 이용해 CSS에 접근했다면 어떤 style 속성을 바꿀 것인지 명시한다.
이 때, style 뒤에 바꾸고 싶은 속성을 카멜 표기법으로 작성한다. (ex. z-index = zIndex)
이후 속성 값을 부여하면 해당 선택자에 속성이 적용된다.

// 해당 id 선택자에 적용된 css 스타일 속성에 현재 들어있는 값을 알고 싶을 경우        
document.선택자.style.css속성명;        

// 해당 id 선택자에 적용된 css 스타일 속성의 속성값을 바꾸고 싶은 경우
document.선택자.style.css속성명 = "바꾸고 싶은 속성값";

예시

See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.

2. getAttribute , setAttribute 메서드

웹 요소를 문서에 삽임할 때 태그 속성을 함께 사용하면 DOM트리에 속성노드가 추가되면서 속성값이 지정된다.
이때 속성에 접근하려면 getAttribute()를 사용하고, 속성을 수정하려면 setAttribute()메서드를 사용한다.

- getAttribute()

선택한 요소의 해당 속성명에 들어있는 값을 반환한다.

 // 기본형
 요소명.getAttribute('속성명')

- setAttribute()

setAttribute 메서드는 선택한 태그의 특정 속성을 수정하는 메서드이다.

선택한 요소의 해당 속성을 속성값으로 바꾼다. 만약 해당 속성이 태그에 없다면 속성과 속성값을 새로 추가한다.

선택할 태그는 document.getElementById()와 같은 형식이거나 다른 태그를 불러오는 속성이어야한다.

첫번째 인자값으로는 해당 태그의 속성 이름이 들어가고 두번째 인자값으로는 해당 속성의 값을 전달한다.

// 기본형
선택한태그.setAttribute("바꾸고 싶은 태그 속성", "바꿀 속성값")

예시