Get and Set CSS Classes : CSS 클래스 가져오기 및 설정

Feb 19, 2024

addClass()- 선택한 요소에 하나 이상의 클래스를 추가

removeClass()- 선택한 요소에서 하나 이상의 클래스를 제거

toggleClass()- 선택한 요소에서 클래스 추가/제거 간을 전환

css()- 스타일 속성을 설정하거나 반환

1. addClass()

다양한 요소에 클래스 특성을 추가하는 방법


<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .important {
            font-weight: bold;
            font-size: xx-large;
        }

        .blue {
            color: green;
        }
    </style>
</head>

<body>
    <h1>CssClass addClass() 실습하기</h1>
    <hr>

    <h1>Heading 1</h1>
    <h2>Heading 2</h2>

    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>

    <div>This is some important text!</div><br>

    <button>Add classes to elements</button>

    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("h1, h2, p").addClass("blue");
                $("div").addClass("important");
            });
        });
    </script>

</body>

</html>

2. addClass()

소드 내에서 여러 클래스를 지정 가능


<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .important {
            font-weight: bold;
            font-size: xx-large;
        }

        .blue {
            color: green;
        }
    </style>
</head>

<body>
    <h1>CssClass addClass() 실습하기2</h1>
    <hr>

    <div id="div1">This is some text.</div>
    <div id="div2">This is some text.</div>
    <br>

    <button>Add classes to first div element</button>

    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#div1").addClass("important blue");
            });
        });
    </script>
</body>

</html>

3. RemoveClass()

다양한 요소에서 특정 클래스 특성을 제거하는 방법


<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .important {
            font-weight: bold;
            font-size: xx-large;
        }

        .blue {
            color: green;
        }
    </style>
</head>

<body>
    <h1>CssClass RemoveClass() 실습하기</h1>
    <hr>

    <h1 class="blue">Heading 1</h1>
    <h2 class="blue">Heading 2</h2>

    <p class="blue">This is a paragraph.</p>
    <p>This is another paragraph.</p>

    <button>Remove class from elements</button>

    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("h1, h2, p").removeClass("blue");
            });
        });
    </script>
</body>

</html>

4. toggleClass()

선택한 요소에서 클래스 추가/제거 간을 전환


<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .important {
            font-weight: bold;
            font-size: xx-large;
        }

        .blue {
            color: green;
        }
    </style>
</head>

<body>
    <h1>CssClass toggleClass() 실습하기</h1>
    <hr>

    <h1>Heading 1</h1>
    <h2>Heading 2</h2>

    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>

    <button>Toggle class</button>

    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("h1, h2, p").toggleClass("blue");
            });
        });
    </script>
</body>

</html>