Stack/JavaScript

[JS] HTML 커스텀 속성

7ingout 2022. 5. 20. 09:18

<a href = "">

<img src ="">

<div>

            <button data-value='50'>50일</button>

            <button data-value='100'>100일</button>

            <button data-value='today'>오늘은</button>

</div>

 

커스텀 속성을 지정하면 button.dataset 만들어짐

 

button.dataset

{

            key: date.

            value: 50,

}

 

ex> <div data-color="red" data-size="big"></div>

-> dataset = {

            color: "red",

            size: "big",

}

-> div.dataset.color

-> div.dataset.size

data-로 시작하는 속성을 정의

-> 자바스크립트에서는 dataset이라는 객체로 만듦

 

 

dataset.html

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <div>
        <button data-key="buttondata" data-value="10">버튼</button>
    </div>
    <script>
        let btn = document.querySelector('button');
        // console.dir(btn);
        console.log(btn.dataset);
        let obj = {
            name: 'green',
            age: 30,
        }
    </script>
</body>
</html>