JQuery addClass
JQuery addClass
■ 이번 글에서는 JQuery의 메서드 중에서 addClass()에 대해서 알아보려고 하는데요. 이 메서드를 이용하면 이미 CSS가 적용된 상태에서 다른 속성을 추가로 부여해서 동시에 표시되도록 할 수 있는 기능입니다.
<class ="aaa">라는 태그가 있을 때 css에서는 다음과 같은 형태로 속성을 정의하겠죠?
-style-
.aaa{
color: red;
}
그리고 CSS에 아래와 같이 다른 bbb라는 클래스가 있다고 할 때....
-style-
.aaa{
color: red;
}
.bbb{
background: blue;
}
■ 이미 aaa 속성이 적용되고 있는 태그에 bb b클래스의 속성을 함께 적용시키는 메서드가 addClass()입니다. 글로는 잘 이해가 안될수도 있게네요. 사용하는 형식을 알아보고 바로 예제를 만들어서 적용해볼게요.
형식 : $("선택자).addClass("추가할 class(bbb)");
■ 이때 추가할 클래스 앞에는 마침표(.)를 사용하지 않습니다. 이미 addClass에서 클래스를 추가한다는 의미를 담고 있기 때문에 (.bbb)가 아니고 그냥 (bbb)입니다. 예제를 하나 만들어볼 텐데요. 화면에 텍스트 단락 하나와 버튼을 배치해서 버튼을 클릭하면 단락의 배경색을 바꾸는 예제를 만들어보겠습니다.
▲ 본문에 간단한 텍스트 단락과 버튼을 하나 배치했습니다.
▲ CSS에서는 해당 aaa 클래스의 속성에서 글자색을 파란색으로 지정하고 있습니다. [.bbb] 클래스는 나중에 addClass 메서드를 이용해서 추가할 속성입니다. 추가할 내용은 빨간색 테두리와 배경색을 "#ccc"로 지정하는 내용입니다.
▲ 이제 js 파일에서 이벤트를 정의하겠습니다. 화면에 배치한 (#btn) 버튼을 클릭하면 이 글의 주제인 addClass 메서드가 실행되면서 aaa 클래스에 (.bbb)의 속성이 추가되도록 하고 있습니다. 이렇게 CSS에 정의되어 있는 class 속성을 추가해서 적용할 수 있습니다. 브라우저에서 실행해보겠습니다.
▲ 브라우저가 로드되면 [.aaa]만 적용된 상태로 출력되겠죠? 이 상태에서 [배경색 바꾸기] 버튼을 클릭하면 [.bbb]도 함께 적용됩니다.
▲ 지정한 대로 빨간색 테두리에 #ccc가 배경색으로 추가된 걸 확인할 수 있습니다. 이때 기존의 파란색 글자도 그대로 있죠? 기존의 속성은 그대로 있는 상태에서 덮어 씌운다고 생각하시면 됩니다.
이렇게 해서 JQuery의 addClass 메서드에 대해서 알아봤습니다. ^^ 수고하셨어요.