[jQuery] Attribute/CSS

Attribute/CSS

Selector를 사용하여 조작을 원하는 HTML 노드를 선택했다면, 이제는 선택한 노드에 어떠한 작업을 할 순서이다.

선택한 노드의 속성 값을 가져오거나 텍스트를 변경할 수 있고, CSS() 함수를 사용하면 CSS에 의해 적용되는 상태를 동적인 상황에서도 변경할 수 있다.

jQuery의 강력한 기능 중 하나는 CSS를 조작할 수 있다는 것이다. 일반적인 CSS는 HTML의 구조에 표현을 입히는 작업이라 할 수 있는데, jQuery의 CSS 관련 메서드는 동적으로 CSS를 변경할 수 있다는 것이 가장 큰 장점이다. 변경을 할 때에 클래스를 추가할 수도 있고, 제거할 수도 있기 때문에 매우 유용하다.

※ <p> 태그의 배경색을 빨간색으로 설정

CSS	jQuery.CSS()
p {background : #F00}	$("p").css("backgournd", "#F00");

※ jQuery CSS 관련 메서드

메서드	설 명
.addClass()	특정한 클래스를 노드에 추가할 수 있다.
.css()	css() 함수는 element의 속성 값을 알아낼수 도 있고, 설정할 수도 있다.
.hasClass()	특정한 클래스가 있는지를 찾을 수 있다.
.removeClass()	특정한 클래스를 요소에서 제거할 수 있다.
.toggleClass()	특정한 클래스의 추가, 제거를 한 번에 처리할 수 있다.

1. CSS()

.css(propertyName) returns: String

css(propertyName)- 속성 값 알아내기

.css() 함수에서 속성 값만을 지정하면 해당 속성의 값을 알아낼 수 있다. 웹 브라우저마다 다르게 표현이라는 속성이라 하더라도 jQuery는 알아서 웹 브라우저에 맞게 동일한 결과를 가져다 준다.

$("div").css("background-color");

// 요소 배경색의 컬러 값을 반환

$("div").css("width");

// 요소 가로폭의 크기 px 값을 반환

.css(propertyName, value) returns: jQuery

css(propertyName, value)- 속성 값 설정하기

단순히 특정 객체의 속성을 읽어노는 것뿐만 아니라 속성을 설정할 수도 있다.

$("div").css('color','#f00');

//<div> 태그의 내용을 빨간색으로 설정

이렇게 될 때 jQuery는 div의 style 속성을 편집하게 되어 inline style를 적용하는 것과 같게 된다.

cf.) { }를 사용하면 한 번에 여러 개를 적용할 수 있다.

$("div").css({'background-color' : '#ddd', 'color' : '#f00', 'font-size' : '10px'});

2. addClass() 

.addClass(className) returns: jQuery

jQuery에서 많이 활용되는 함수로, CSS가 필요한 상황에 적용할 수 있다.

$('p').addClass('myclass');

// p 요소에 myclass 추가

<p class="myclass">XXX</p>

cf.) 기존에 클래스가 있는 경우

<p> 태그에 class가 추가된다. 기존 클래스는 그대로 유지된다.

$('p').addClass("myclass"); 를 사용하면 <p> 태그의 상태는 아래와 같이 기존 클래스와 새로 추가된 클래스(myclass)가 함께 적용된다.

<p class="existClass myclass">

3. removeClass()

.removeClass([className]) returns: jQuery

removeClass는 기존 태그에 적용되어 있는 클래스를 제거하는 함수이다.

- 하나 이상의 클래스를 제거하려면 아래와 같이 공백을 사용해야 한다.

$('p').removeClass('classA classB classC');

- 클래스 이름이 myClass인 <p> 태그에 jQuery 코드 $('p').removeClass("myClass");가 실행되면 <p> 태그 <p class="myclass"></p> 에서

myClass가 제거되기 때문에 <p class=""></p>처럼 변경된다.