30. (jquery/제이쿼리) hasClass 객체에 클래스 포함 확인 , addClass 객체에 클래스 추가 , removeClass 객체에 클래스 삭제 수행

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : jquery

---

[소스 코드]

​

    <!-- Jquery CDN 로드 : 항상 최신 버전 사용 -->    
    <script src="https://code.jquery.com/jquery-latest.min.js"></script> 



    <!-- 내부 JS 지정 : 일반 -->
    <script>

        /*
        [JS 요약 설명]
        1. window.onload : 브라우저 로드 완료 상태를 나타냅니다
        2. tagId.css : 특정 태그 css 속성값을 확인 및 변경합니다
        3. hasClass : 객체가 특정 클래스를 포함하고 있는지 상태를 알려줍니다 (true / false 반환)
        4. addClass : 객체에 특정 클래스를 추가합니다
        5. removeClass : 객체에 특정 클래스를 제거합니다        
        */

        /*
        [css style 생성 클래스 코드]
        .cBgBlue {
            background-color: #0000ff;
        }
        */



        /* [html 최초 로드 및 이벤트 상시 대기 실시] */
        window.onload = function() {
            console.log("");
            console.log("[window ready] : [start]");
            console.log("");
        };



        /* [이벤트 수행 부분] */                
        function classCheck() {
            console.log("");
            console.log("[classCheck] : [start]");
            console.log("");

            // 객체 id 매핑 실시 
            var tagId = $("#container");

            // css 속성 사용해 객체 배경색 확인
            var beforeBackgroundColor = tagId.css("backgroundColor");
            
            // 객체가 [style] 에서 지정한 [cBgBlue] 클래스를 포함하고 우선 확인 (true / false)
            var beforeClassContains = tagId.hasClass("cBgBlue");
            console.log("");
            console.log("[classCheck] : [beforeBackgroundColor] : " + beforeBackgroundColor);
            console.log("[classCheck] : [beforeClassContains] : " + beforeClassContains);
            console.log("");

            // 분기처리 실시 : 클래스 추가, 삭제 수행
            if(beforeClassContains == false){ // 클래스가 포함되지 않은 경우 >>  추가 실시
                tagId.addClass("cBgBlue");
            }
            else { // 클래스가 포함된 경우 >> 제거 실시
                tagId.removeClass("cBgBlue");
            }

            // 변경된 값 재확인 실시
            var afterBackgroundColor = tagId.css("backgroundColor");
            var afterClassContains = tagId.hasClass("cBgBlue");
            console.log("");
            console.log("[classCheck] : [afterBackgroundColor] : " + afterBackgroundColor);
            console.log("[classCheck] : [afterClassContains] : " + afterClassContains);
            console.log("");            
        }; 
                
    </script>

---

[결과 출력]

​

---

[요약 설명]

​

/*

[JS 요약 설명]

1. window.onload : 브라우저 로드 완료 상태를 나타냅니다

2. tagId.css : 특정 태그 css 속성값을 확인 및 변경합니다

3. hasClass : 객체가 특정 클래스를 포함하고 있는지 상태를 알려줍니다 (true / false 반환)

4. addClass : 객체에 특정 클래스를 추가합니다

5. removeClass : 객체에 특정 클래스를 제거합니다

*/

---