엘리먼트 스타일 변경하기

. addClass(names)

  매개변수로 전달된 하나 이상 되는 클래스명을 확장 집합의 모든 엘리먼트에 추가

  여러 클래스명을 추가할 때는 공백으로 구분

 

. removeClass(names)

  매개변수로 전달된 하나 이상의 클래스명을 확장 집합에 있는 모든 엘리먼트에서 제거

 

. toggleClass(name)

  매개변수로 전달된 클래스명이 엘리먼트에 존재하지 않으면 추가하고,

  존재한다면 제거

  각 엘리먼트 개별로 처리되므로 추가되기도 제거되기도 한다.

  function swap() {

     $('tr').toggleClass('striped');

  }

  <table onmouseover="swap();" onmouseout="swap();">

 

 

. css(name, value=String|Number|Function)

  일치하는 각 엘리먼트에 name 매개변수의 CSS 스타일 프로퍼티를 value 매개변수로 설정

  $("div.expandable").css("width",function() {

     return $(this).width() + 20 + "px";

  } );

 

. css(properties)

 

 

. css(name)

  확장 집합의 첫 번째 엘리먼트에서 name으로 명시한 CSS 프로퍼티의 계산 값을 가져온다.

  return 값은 숫자라도 문자열이다.

 

. width(value), height(value)

  일치하는 집합에 속한 모든 엘리먼트의 너비나 높이를 설정

  value는 pixel값

  $("div.myElements").css("width","500px"); 또는

  $("div.myElements").width(500);

 

. width(), height()

 

 

. hasClass(name)

  일치하는 집합의 엘리먼트에 전달된 클래스 이름이 있는지 확인

  이름이 있으면 true, 아니면 false

  $("p:first").hasClass("surpriseMe"); 또는

  $("p:first").is(".surpriseMe");

 

  클래스명의 배열을 얻으며, 엘리먼트에 클래스명이 없으면 빈 배열을 반환하는 코드

  $.fn.getClassNames = function() {

     if( name = this.attr("className") ) {

        return name.split(" ");

     }

     else {

        return [];

     }

  };