컬쳐N라이프

jQuery를 이용한 css, 스타일 시트 적용에 대해 알아보겠습니다.

.css() 함수를 이용하여 css속성에 대한 값을 가져오고 값을 지정할 수 있습니다.

.css("속성", "value") 의 형태로 사용하시면 됩니다.

<span id="result">&nbsp;</span>

<div class="div" style="background-color:blue;"></div>

<div class="div" style="background-color:rgb(15,99,30);"></div>

<div class="div" style="background-color:#123456;"></div>

<div class="div" style="background-color:#f11;"></div>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<button class="btn" id="change">1번 검정색 변경</button>

<button class="btn" id="change2">2번 노랑 변경</button>

<button class="btn" id="change3">3번 width 100</button>

<button class="btn" id="change4">4번 height 100</button>

- jQuery

$(document).ready(function() {

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

    $( "#result" ).html( "That div is <span style='color:" +

    color + ";'>" + color + "</span>." );

    $('.btn').off('click').on('click', function() {

     var idx = $('.btn').index(this);

      var div = $('.div').eq(idx);

      if (idx == 0) {

      div.css("background-color", "black");

      }

      else if (idx == 1) {

      div.css("background-color", "yellow");

      }

      else if (idx == 2) {

      div.css("width", 100);

      }

      else if (idx == 3) {

      div.css("height", 100);

      }

  });

});

각 사각형을 클릭했을 때 박스의 rgb 값을 나타내고 있습니다.

또한 각 버튼에 css속성과 값을 적용시켜

색깔을 변경시키거나 가로, 세로 길이를 조정할 수 있습니다.

예제 : 이동

다음 시간에는 jquery를 이용한 텍스트 자르기 붙이기, 비교 등을 알아보겠습니다.