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시키는 것이라고 생각하면 된다. 직접 돌려보면 어떤식으로 되는지 알수 있을것이다. 응용은 알아서 하길 바란다.
