[ jquery 기초 ] jquery CSS - 스타일 메서드

 

| HTML 문서의 스타일(CSS) 제어하기

• .css()

.css()를 이용해 현재 적용되어 있는 스타일을 가져오거나 새로운 스타일을 적용합니다. $(“div”).css(“background-color”)의 경우 해당 선택된 개체의 배경 색상을 가져옵니다. 기본적인 표현 식은 스타일에서 사용되는 구문을 동일하게 사용하시면 됩니다. 

새로운 스타일을 적용하고 싶을 경우에는 css(propertyName, value) 메서드를 사용하시면 됩니다. 앞에서 진행한 예제를 보시면 대부분의 경우 이 메서드를 사용해서 강조하고 있습니다. 사용법 또한 스타일 관련 문법만 알고 계시면 어렵지 않게 활용 가능합니다.

붉은색 배경을 넣고 싶을 경우 $(“div”).css(“background-color”, “red”); propertyName에는 적용할 스타일의 이름과 value에는 원하는 값을 넣기만 하면 됩니다.

$(“div”).css(“background-color”, function(index, value) { }); 와 같은 형식을 통해 자신이 원하는 기능을 확장하여 사용할 수 있습니다. function의 파라미터를 살펴보면 index와 value가 존재하고 있습니다. Index의 경우 선택한 개체의 순서이며, value는 해당 개체의 현재 스타일 속성값입니다. 이 형식을 사용하면, 한번에 개체의 스타일 값을 확인하고 변경할 수 있는 큰 장점이 있습니다. 

 

• .hasClass(className)

선택된 개체의 className과 동일한 클래스가 존재하는지에 대한 결과를 True/False로 반환합니다.

 

• .addClass(className)
  • .addClass( className )
  • addClass( function(index, currentClass) )

새로운 클래스를 추가하는 메서드입니다. $(“div”).addClass(“className”) 셀렉터를 통해 가져온 개체에 className이라는 클래스를 추가합니다.

 

• .removeClass()
  • removeClass( [ className ] )
  • removeClass( function(index, class) )

.addClass()와 반대인 해당 className을 삭제합니다.

 

• .toggleClass()
  • toggleClass( className )
  • toggleClass( className, switch )
  • toggleClass( function(index, class), [ switch ] )

선택한 개체를 마치 스위치처럼 껏다(removeClass()), 켯다(addClass())하는 기능을 하는 메서드입니다. $(“div”).toggleClass(“myClass”) 선택한 개체에 myClass가 적용 시 myClass를 삭제를 하고, 적용되지 않은 경우에는 myClass를 적용하는 역할을 합니다.

toggleClass(className, switch)의 두 번째 파라미터인 switch(Boolean)값을 통해 사용자가 toggle상태를 지정할 수 도 있습니다. true 라면 addClass()와 같은 효과를 반대로 false라면 removeClass()와 같은 효과를 나타냅니다. 이 메서드 역시 function을 통한 확장된 제어가 가능합니다.

 

• .position(), .width(), .height()

.Position() 은 선택된 개체의 위치값을 반환합니다. 반환되는 개체는 top, left라는 속성값을 가지고 있습니다.

var p = $(“div”).position();
var pTop = p.top;
var pLeft = p.left;

.width() 와 .height()는 가로길이, 세로길이를 반환하거나 설정하는 메서드 입니다.

 

개체의 가로,세로 길이를 구할 때

var width = $(“div”).width();

var height = $(“div”).height();

 

개체의 가로, 세로 길이를 지정 할 때

$(“div”).width(100);

$(“div”).height(100);