attr() - style의 특정 속성만 바꾸기

jquery의 attr()과 removeAttr()이라는 메소드는 해당 객체의 속성을 넣었다 뺐다 할 수 있다.
그리고 예를 들어 보였던 객체를 안보기에 하려고 한다면, 아래와 같이 하면 된다.(사실 보이는 객체를 안보이게 하려면 toggle()을 쓰면 간단하지만..... )

if( a == 1 ) $('id').attr('style', "display:inline;");
else  $('id').attr('style', "display:none;");

단순히 해당 속성의 값을 재설정 해주면 되는것이다.
그런데, 이런 간단한 경우 말고, 해당 속성의 같은이름을 가지는 여러값을 한번에 바꿔준다거나, 할때도 있을것이다. 예를 들어 width, height 가 모두 100px인데 이걸 모두 200px로 바꿔 주고 싶다거나 할 때 말이다.
이럴때는 아래와 같이 하면 된다.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>

<script type="text/javascript">
$( function() {
  $('#bt').click( function(){
    if( $(this).val() == "click!!" )
    {
      $('#bt').attr('style', $('#bt').attr('style').split('50px').join('100px'));
      $(this).val("click!");
    }
    else
    {
      $('#bt').attr('style', $('#bt').attr('style').split('100px').join('50px'));
      $(this).val("click!!");
    }
  });
});
</script>

<input type="button" id="bt" value="click!!" style="height:50px;width:50px;">

그냥 attr()을 이용해서 비슷한 값을 모두 replace시키는 것이라고 생각하면 된다. 직접 돌려보면 어떤식으로 되는지 알수 있을것이다. 응용은 알아서 하길 바란다.