Sungtt

5. data어트리뷰트와 dataset프로퍼티 본문

JavaScript

5. data어트리뷰트와 dataset프로퍼티

sungtt 2022. 1. 7. 03:56

data어트리뷰트와 dataset프로퍼티에 대해 배웠다.

 

예전에 스크롤감지 애니메이션 라이브러리를 사용할 때 이 data어트리뷰트를 통하여

 

애니메이션을 조절했는데, 뒤늦게서야 그 원리를 이해할 수 있는 시간이었다.

 

<!DOCTYPE html>
<html lang="kr">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>data 어트리뷰트와 dateset 프로퍼티</title>
    </head>
    <style>
        .dataDiv{
            float: left;
        }

        .dataCss {
            font-size: 40px;
            text-align: center;
            width: 200px;
            height: 200px;
        }

        /*data-css-shape값이 1일경우의 css*/
        .dataCss[data-css-shape='1'] {
            background-color: green;
            color: yellow;
        }
        /*data-css-shape값이 2일경우의 css*/
        .dataCss[data-css-shape='2'] {
            background-color: yellow;
            color: green;

        }
        /*data어트리뷰트를 참조할 수도 있다.*/
        .dataCss::before {
            content: attr(data-css-shape);
        }
    </style>
    <body>
        <ul class="users">
            <li id="1" data-name-id="Sungtt" data-address="Seoul">Sungtt</li>
            <li id="2" data-name-id="Sott" data-address="Busan">Sott</li>

        </ul>

        <div class="dataDiv">
        <input type="text" id="dataText">data프로퍼티 값
        <button id="dataAdd">dataAdd</button><br><br>

        <div class="dataCss" data-css-shape="1"></div>
        <button onclick="dataCss1()">dataCss 1번</button>
        <button onclick="dataCss2()">dataCss 2번</button>
        </div>

    </body>
    <script>

        // uesrs클래스의 li를 할당
        let users = [
            ...document
                .querySelector(".users")
                .children
        ];

        console.log(users);

        // li의 data어트리뷰트의 이름이 nameId 이고 값이 Sungt인 노드를 취득
        let user = users.find(user => user.dataset.nameId === "Sungtt");

        console.log(user);

        let userAdr = user.dataset.address;

        console.log(userAdr);

        console.log(user.dataset);

        // user의 address를 Busan으로 변경
        user.dataset.address = 'Busan';

        // 변경된 address 값을 확인할 수 있다.
        console.log(user.dataset);

        //존재하지않는 이름의 data어트리뷰트를 data프로퍼티에 추가하면 data어트리뷰트에 추가된다.
        user.dataset.lastName = "Park";

        //추가할 때 카멜케이스의 data프로퍼티 이름이 케밥케이스로 자동 변경된다.
        console.log(user.dataset);

        let $button = document.querySelector("#dataAdd");
        //input에 입력한 값으로 data프로퍼티를 추가한다.
        $button.onclick = function dataChange(){
            let dataText = document.querySelector('#dataText').value;

            // user.dataset.dataName = dataText;
            user.dataset.newDataProperty = dataText;

            console.log(user.dataset);

        };

        //div.dataCss를 배열로 취득
        let css = [document.querySelector(".dataCss")];
        console.log(css)
        //css의 data취득
        let cssShape = css.find(cssShape => cssShape.dataset.cssShape);
        console.log(cssShape);

        //프로퍼티값 변경
        function dataCss1() {
            cssShape.dataset.cssShape = "1";
        };
        function dataCss2() {
            cssShape.dataset.cssShape = "2";
        };
    </script>
</html>

 

See the Pen Untitled by qirtudgus (@qirtudgus) on CodePen.

'JavaScript' 카테고리의 다른 글

7. 문자열 변환 replace, replaceAll, substring  (0) 2022.03.13
6. 이벤트 핸들러의 방식  (0) 2022.01.08
4. html노드 생성과 삭제  (0) 2022.01.06
3. DOM 스크롤 실시간 감지  (0) 2022.01.04
2. 연산자의 종류  (0) 2021.12.13
'JavaScript' Related Articles more
Comments