jQuery - 동적으로 CSS 속성 추가하기

jQuery - 동적으로 CSS 속성 추가하기

 

기존에 하나씩 css의 속성을 추가할 일만 있었는데 여러개 속성을 추가할 일이 생겼다.

속성 갯수가 적다면 상관없지만 많다면 기존방법으로 여러번하는 일은 비효율적이라 방법을 찾아봤는데 아주 간편한 방법이 있어 정리한다.

 

속성 1개 추가

 

속성이 하나 뿐일때는 다음과 같이 간편하게 가능하다.

$('#test').css('display', 'none');

 

속성이 여러개

 

이때는 위 방법같이 하게 된다면 속성에 갯수에 따라 코드라인이 증가하며 가독성도 떨어트리게 될 것이다.

아래와 같이 css에 적용된 class 자체를 넣어준다.

 

jQuery

$("#test").attr({ "class" : "testClass" });

 

Document

document.getElementById ("test").setAttribute("class", "testClass");