[jQuery] CSS 관련 메서드, CSS Class 관련 메서드, 스타일 값 구하기, 스타일 값 설정하기

CODEDRAGON Development/JavaScript, jQuery, ...

반응형



 

 

CSS 관련 메서드

메소드

설명

css( name )

매치되는 첫번째 요소의 스타일 속성을 반환합니다.

 

var color = $(this).css("color");

css( name, value )

매치된 모든 요소에 대해 단일 스타일 속성을 설정합니다.

 

$(this).css('color':'yellow');

css( properties )

매치된 모든 요소들의 스타일 속성에 키:값을 설정합니다.

 JSON 형식의 구문을 사용하여 여러 CSS 속성을 한번에 설정할 수 있습니다.

 

$(this).css(

{ 'color':'yellow', 'font-weight':'bolder' }

);

 

 


CSS Class 관련 메서드

메소드

설명

addClass( class )

매치된 요소들의 각 집합에 지정된 CSS 클래스를 추가합니다.

hasClass( class )

지정된 클래스가 매치된 요소 집합 중 최소 한 군데 이상 적용되어 있다면 true를 반환합니다.

removeClass( class )

매치된 요소들의 각 집합에서 지정된 CSS 클래스 혹은 모든 클래스를 제거합니다.

toggleClass( class )

지정된 클래스가 적용되지 않았다면 적용하고, 이미 적용되어 있다면 제거합니다.

 

 


 

스타일 값 구하기

 

var $foo = $("#foo");

$foo.css("color");

$foo.css("fontSize");

$foo.css("font-size");

 

 

 



스타일 값 설정하기

 

1개 속성 설정할때

속성, 값을 css의 매개변수로 입력해 주면 됩니다.

$("#foo").css("left", "100px");

$("#foo").css("color", "#ff0000");

 

 

 

여러개 속성 설정할때

{}안에 속성:값을 쉼표(,)로 나열해 주면 됩니다.

$("#foo").css({

position : "absolute",

left : "100px",

color : "#ff0000"

});

 

 

 

http://api.jquery.com/css/

http://www.w3schools.com/jquery/jquery_css.asp