<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>'Stack > JavaScript' 카테고리의 다른 글
| [JS] 슬라이더 (0) | 2022.05.23 |
|---|---|
| [JS] 클래스 (ES6) (0) | 2022.05.20 |
| [JS] 새로운 데이터 타입 (0) | 2022.05.19 |
| [JS] 정규표현식 (0) | 2022.05.19 |
| [JS] Daum 우편번호 서비스 API 활용 (0) | 2022.05.18 |