09.jQuery - AddClass , RemoveClass ( 09.AddClassRemoveClass )

티스토리 뷰

Posted by Godffs on 2009. 11. 6. 09:57 in jQuery | javascript | CSS /

AddClass 와 RemoveClass : CSS관련 메서드

AddClass

매치된 요소들의 각 집합에 지정된 CSS 클래스를 추가

RemoveClass

매치된 요소들의 각 집합에서 지정된 CSS 클래스 혹은 모든 클래스를 제거

[ 출처 : Taeyo ]

09.AddClassRemoveClass.htm

<head>

<title>addClass() : 스타일 추가</title>

.yellow { background-color:Yellow; border:1px solid red; }

</style>

//[!] 마우스 오버시 yellow 스타일 적용, 아웃시 yellow 스타일 해제

$(document).ready(function() {

$('#btnClick')

//yellow의 클래스를 호출

.bind('mouseover', function() { $('#btnClick').addClass('yellow'); })

//yellow의 클래스를 제거

.bind('mouseout', function() { $(this).removeClass('yellow'); });

});

</script>

</head>

<body>

마우스를 올려보세요~

</div>

</body>

</html>

결과화면

[그림9-1]