jQuery - DOM 요소 클래스 속성(CSS 동적 적용)

jQuery - DOM 요소 클래스 속성(CSS 동적 적용)

DOM 요소의 클래스 속성

CSS 효과 동적 적용 CSS의 클래스 선택자에게 적용된 여러 효과를 동적으로 추가하거나 제거 addClass('클래스명') : CSS 효과 적용 removeClass('클래스명') : 적용된 CSS 효과 제거(해제) toggleClass('클래스명') : addClass()와 removeClass() 번갈아 실행하는 결과

DOM 요소의 클래스 속성 예제 - DOMaddClass.html

* { text-align:center; } .h1Css { background-color:gold; color:blue; } .imgCss { opacity:0.5; box-shadow: 5px 5px 10px 1px #777777; /* x-position y-position blur color */ } .hidden{ visibility:hidden; } $(document).ready(function() { $('img') .on('mouseover', function(){ $(this).addClass('imgCss'); $('h1').text("여러 CSS 효과 동적으로 적용"); $('h1').addClass('h1Css'); }) .on('mouseout', function(){ $(this).removeClass('imgCss'); $('h1').text("이미지에 마우스를 올려보세요."); $('h1').removeClass('h1Css'); }); // [toggleClass] 버튼 클릭 시 addClass()와 removeClass() 번갈아 적용 $('#toggle').on('click', function(){ $('img').toggleClass('hidden'); //hidden 클래스 효과 }); }); 이미지에 마우스를 올려보세요. toggleClass

from http://5bong2-develop.tistory.com/117 by ccl(A) rewrite - 2021-12-15 14:27:34