09.jQuery - AddClass , RemoveClass ( 09.AddClassRemoveClass )
AddClass 와 RemoveClass : CSS관련 메서드
| AddClass |
| 매치된 요소들의 각 집합에 지정된 CSS 클래스를 추가 |
| RemoveClass |
| 매치된 요소들의 각 집합에서 지정된 CSS 클래스 혹은 모든 클래스를 제거 |
[ 출처 : Taeyo ]
| 09.AddClassRemoveClass.htm |
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>addClass() : 스타일 추가</title> <style type="text/css"> .yellow { background-color:Yellow; border:1px solid red; } </style> <script src="jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script> <script type="text/javascript"> //[!] 마우스 오버시 yellow 스타일 적용, 아웃시 yellow 스타일 해제 $(document).ready(function() { $('#btnClick') //yellow의 클래스를 호출 .bind('mouseover', function() { $('#btnClick').addClass('yellow'); }) //yellow의 클래스를 제거 .bind('mouseout', function() { $(this).removeClass('yellow'); }); }); </script> </head> <body> <div id="btnClick"> 마우스를 올려보세요~ </div> </body> </html> |
| 결과화면 |
 [그림9-1] |
09.AddClassRemoveClass.htm