[JS] 자바스크립트로 CSS 속성 변경하기

 

자바스크립트에서 너무 많은 CSS변경을 하게 되면 성능 이슈가 발생할 수 있다고 한다.

 

CSS에서 변경할 수 있다면 최대한 CSS에서 직접 처리하도록 하자.

 

[ JavaScript에서 DOM 객체 선택 ]

document.getElementById('id')
document.getElementsByClassName('class')
document.getElementsByTagName('tag')
document.getElementsByName('name')
document.querySelector('header > a')
document.querySelectorAll('header a')

 

[ HTML 스타일 변경하기 ]

getElementsByClassName
document.getElementsByClassName("class")[0].style.borderColor = "red";

getElementById
document.getElementById("id").style.borderColor = "red";

querySelector
document.querySelector(".class").style.borderColor = "red";

 

[ HTML CSS 클래스 변경하기 ]

className 특정 엘리먼트의 클래스 속성의 값을 가져오거나 설정할 수 있다.

getElementsByClassName
document.getElementsByClassName("class")[0].className = "active";

getElementById
document.getElementById("id").className = "active";

querySelector
document.querySelector(".class").className = "active";


// 활용
let elm = document.getElementById('id'); 

if(elm.className === 'active'){ 
	elm.className = 'inactive'; 
} else { 
	elm.className = 'active'; 
};

 

[ getElement.style 규칙 ]

1. border-color, border-radius, v-index 등 CSS에 "-"가 있는 경우 borderColor, borderRadius , vIndex로 표기한다.

document.getElementById('id').style.borderColor="red"

 

2. 단위는 px, em, % 등 기존 CSS와 같은 단위를 표기한다.

 

3. :hover, :after, :before 등은 style 을 만들어서 html의 끝에 붙여넣는 방법을 이용할 수 있다.

<style>
    #styleTest { float : right; }
</style>

<script>
	var elm = document.createElement('style');
    elm.innerHTML="#styleTest:hover{ color: #fff }";
    document.body.appendChild(elm);
</script>

 

4. innerHTML을 활용

var styleTest = document.createElement('style');
styleTest.innerHTML="div{height:30px;} a{color:#fff;}";
document.head.appendChild(styleTest);

 

5. style 적용 우선순위

!important > inline-style (HTML태그안에 직접 입력) > 부모자식으로 연결된경우 > #id

> .class > tag > 부모값에 의한 상속

 

 

 

 

* 참고 사이트

https://developer.mozilla.org/ko/docs/Web/API/Element

https://developer.mozilla.org/ko/docs/Web/API/Element/className