스타일&속성

스타일 다루기

 

• 스타일 값 구하기
  

  $대상.css("스타일 속성이름")
  $대상.css(["스타일 속성이름","스타일 속성이름",...])​

• 스타일 값 설정하기
  

  $대상.css("속성이름", "값")
  $대상.css({
  	속성이름:값
  	속성이름:값
  })

• 클래스 추가
  

  $대상.addClass("클래스 이릅1 [클래스 이름2 ...]")​

• 클래스 삭제
  

  $대상.removeClass()	// 모든 클래스 삭제
  $대상.removeClass("클래스 이름1 [클래스 이름2 ...]")​

cf)
       ▷ css (width, height, background...)
           - $('p').css('width', 300) : width를 변경
           - $('p').width(300) : width를 변경
           - $('p').css('width') : width를 체크하여라 (값을 가지고 와라)
           - $('p').width() : width를 체크하여라 (값을 가지고 와라)

 

      ▷ text
           - $('p').text('내용') : text를 변경
           - $('p').text('') : text를 비워라 (지워라)
           - $('p').text() : text를 체크 (값을 가지고 와라)

 

 

속성 다루기

 

• 속성값 구하기
  

  $대상.attr("속성이름")
  $대상.data("data-속성이름")​

• 속성 값 설정하기
  

  $대상.attr("속성이름", "값")
  $대상.data("data-속성이름", "값")​

• attr(src, href, alt, title...)
  - $('img').attr('src', 내용) : 속성을 변경
  - - $('img').attr('src') : 속성을 체크 (가지고 와라)
• value
  - 태그에 있는 내용은 text
  - form에 있는 내용은 value
  - .val('내용') : 내용을 삽입(변경)하여라
  - .val('') : 내용을 지워라/비워라
  - .val() : 내용을 체크하여라/가지고 와라