화면구현/HTML

클래스속성

psys 2020. 7. 8. 09:54
728x90

클래스로 접근하면 세트로 접근 가능!

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .aaa {
            background-color: palegoldenrod;
        }

        .bbb {
            background-color: orchid;
        }

        div {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="aaa"></div>
</body>

</html>

 

but,, 자바스크립트에서 class로 접근 하는 것에 문제가 있어,,

<body>
    <div class="aaa" id="id_psy"></div>
    <script>
        var v_div = document.getElementById("id_psy");
        alert(v_div.class);
    </script>
</body>

 

왜

        alert(v_div.class);

이거 undefined야?

그건바로!! class가 이미 예약된 키워드이기 때문이야

 

className

        alert(v_div.className);

 

getAttribute

<body>
    <div class="aaa" id="id_psy"></div>
    <script>
        var v_div = document.getElementById("id_psy");
        alert(v_div.getAttribute("class"));
    </script>
</body>

 

 

버튼누르면 aaa클래스에서 bbb클래스로 변경되게하기@!

 
<body>
    <div class="aaa" id="id_psy"></div>
    <input type=button value="클래스바꾸기" onclick="f_chgClass()">
    <script>
        var v_div = document.getElementById("id_psy");
        function f_chgClass() {
            v_div.className = "bbb";
        }
    </script>
</body>
더보기 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .aaa {
            background-color: palegoldenrod;
        }

        .bbb {
            background-color: orchid;
        }

        div {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="aaa" id="id_psy"></div>
    <input type=button value="클래스바꾸기" onclick="f_chgClass()">
    <script>
        var v_div = document.getElementById("id_psy");
        // alert(v_div.className); // class는 이미 예약된 키워드라서
        // alert(v_div.getAttribute("class"));
        function f_chgClass() {
            v_div.className = "bbb";
        }
    </script>
</body>

</html>

 

버튼 하나 더 추가하여 클래스 추가(현재 클래스 그대로두고!!)

 
    <script>
        function f_addClass() {
            v_div.className = v_div.className + " ccc";
        }
    </script>
더보기 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .aaa {
            background-color: palegoldenrod;
        }

        .bbb {
            background-color: orchid;
        }
        .ccc{
            color: red;
        }
        div {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="aaa" id="id_psy">안녕안녕</div>
    <input type=button value="클래스바꾸기" onclick="f_chgClass()">
    <input type=button value="클래스추가하기" onclick="f_addClass()">
    <script>
        var v_div = document.getElementById("id_psy");
        // alert(v_div.className); // class는 이미 예약된 키워드라서
        // alert(v_div.getAttribute("class"));
        function f_chgClass() {
            v_div.className = "bbb";
        }
        function f_addClass() {
            v_div.className = v_div.className + " ccc";
        }
    </script>
</body>

</html>

 

 

ccc를 다시 빼기

>> 내가 생각했던 방법

    <script>
        function f_removeClass() {
            var v_remClass = v_div.className.split(" ");
            v_div.className = v_remClass[0];
        }
    </script>
더보기 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .aaa {
            background-color: palegoldenrod;
        }

        .bbb {
            background-color: orchid;
        }

        .ccc {
            color: red;
        }

        div {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="aaa" id="id_psy">안녕안녕</div>
    <input type=button value="클래스바꾸기" onclick="f_chgClass()">
    <input type=button value="클래스추가하기" onclick="f_addClass()">
    <input type=button value="클래스빼기" onclick="f_removeClass()">
    <script>
        var v_div = document.getElementById("id_psy");
        // alert(v_div.className); // class는 이미 예약된 키워드라서
        // alert(v_div.getAttribute("class"));
        function f_chgClass() {
            v_div.className = "bbb";
        }
        function f_addClass() {
            v_div.className = v_div.className + " ccc";
        }
        function f_removeClass() {
            var v_remClass = v_div.className.split(" ");
            v_div.className = v_remClass[0];
        }
    </script>
</body>

</html>

>> 강사님께서 생각하신 방법

1) 문자열 더하기

 

    <script>
        function f_removeClass() {
            var v_remClass = "ccc";
            var v_strClass = v_div.className;
            //못찾으면 -1, 찾으면 그 글자 시작되는 인덱스 번호가 나옴
            alert(v_strClass.indexOf(v_remClass));
        }
    </script>

 

alert는 aaa만 나와

    <script>
        function f_removeClass() {
            var v_remClass = "ccc";
            var v_strClass = v_div.className;
            var v_indexNum = v_strClass.indexOf(v_remClass);
            if (v_indexNum != -1) {//찾았으면
                alert(v_strClass.substring(0, v_indexNum-1)); // 공백제거-1
            }
        }
    </script>
더보기 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .aaa {
            background-color: palegoldenrod;
        }

        .bbb {
            background-color: orchid;
        }

        .ccc {
            color: red;
        }

        div {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="aaa" id="id_psy">안녕안녕</div>
    <input type=button value="클래스바꾸기" onclick="f_chgClass()">
    <input type=button value="클래스추가하기" onclick="f_addClass()">
    <input type=button value="클래스빼기" onclick="f_removeClass()">
    <script>
        var v_div = document.getElementById("id_psy");
        // alert(v_div.className); // class는 이미 예약된 키워드라서
        // alert(v_div.getAttribute("class"));
        function f_chgClass() {
            v_div.className = "bbb";
        }
        function f_addClass() {
            v_div.className = v_div.className + " ccc";
        }
        function f_removeClass() {
            var v_remClass = "ccc";
            var v_strClass = v_div.className;
            var v_indexNum = v_strClass.indexOf(v_remClass);
            if (v_indexNum != -1) {//찾았으면
                alert(v_strClass.substring(0, v_indexNum-1)); // 공백제거-1
            }
        }
    </script>
</body>

</html>

2) classList

문자열 더하기 빼기 하기가 귀찮아서 만들어준게 classList!!

    <script>
        var v_div = document.getElementById("id_psy");
        function f_chgClass() {
            v_div.className = "bbb";
        }
        function f_addClass() {
            v_div.classList.add("ccc");
        }
        function f_removeClass() {
            v_div.classList.remove("ccc");
        }
    </script>
더보기 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .aaa {
            background-color: palegoldenrod;
        }

        .bbb {
            background-color: orchid;
        }

        .ccc {
            color: red;
        }

        div {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="aaa" id="id_psy">안녕안녕</div>
    <input type=button value="클래스바꾸기" onclick="f_chgClass()">
    <input type=button value="클래스추가하기" onclick="f_addClass()">
    <input type=button value="클래스빼기" onclick="f_removeClass()">
    <script>
        var v_div = document.getElementById("id_psy");
        // alert(v_div.className); // class는 이미 예약된 키워드라서
        // alert(v_div.getAttribute("class"));
        function f_chgClass() {
            v_div.className = "bbb";
        }
        function f_addClass() {
            // v_div.className = v_div.className + " ccc";
            v_div.classList.add("ccc");
        }
        function f_removeClass() {
            v_div.classList.remove("ccc");
            /*// var v_remClass = v_div.className.split(" ");
            // v_div.className = v_remClass[0];
            var v_remClass = "ccc";

            var v_strClass = v_div.className;
            // 못찾으면 -1, 찾으면 그 글자 시작되는 인덱스 번호가 나옴
            // alert(v_strClass.indexOf(v_remClass));
            var v_indexNum = v_strClass.indexOf(v_remClass);
            if (v_indexNum != -1) {//찾았으면
                alert(v_strClass.substring(0, v_indexNum-1));//공백제거-1
            }
            // if(v_strClass.indexOf(v_remClass))*/
        }
    </script>
</body>

</html>

'화면구현 > HTML' 카테고리의 다른 글

[리눅스, 윈도우] PHP설치  (0) 2020.07.08
form  (0) 2020.07.08
마우스로끌기 완성~  (0) 2020.07.08
다양한요소등록법  (0) 2020.07.02
화면색상변경  (0) 2020.07.02

'화면구현/HTML'의 다른글

  • 현재글클래스속성

관련글

댓글

티스토리툴바