오봉이와 함께하는 개발 블로그

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

FE/jQuery

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

오봉봉이 2021. 12. 15. 14:23
728x90

DOM 요소의 클래스 속성

  • CSS 효과 동적 적용
    • CSS의 클래스 선택자에게 적용된 여러 효과를 동적으로 추가하거나 제거
      • addClass('클래스명') : CSS 효과 적용
      • removeClass('클래스명') : 적용된 CSS 효과 제거(해제)
      • toggleClass('클래스명') : addClass()와 removeClass() 번갈아 실행하는 결과
DOM 요소의 클래스 속성 예제 - DOMaddClass.html
<style type="text/css">            
        * { 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; }
    </style>
    <script src="jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(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 클래스 효과
            });
         });
    </script>
</head>
<body>
    <div id="wrap">
        <h1>이미지에 마우스를 올려보세요.</h1>          
        <img src="image/painting.jpg"><br><br>
        <button id="toggle">toggleClass</button>
    </div>
</body>
728x90
저작자표시

'FE > jQuery' 카테고리의 다른 글

jQuery - 응용 예제(음성 녹음, 녹음 파일 저장)  (7) 2021.12.15
jQuery - 효과  (0) 2021.12.15
jQuery - DOM 요소의 추가 및 삭제  (0) 2021.12.15
jQuery - DOM 요소 조작  (0) 2021.12.15
jQuery - each() 메소드  (0) 2021.12.15
'FE/jQuery' Related Articles more
Comments