HTML 엘리먼트에 커스텀 attribute로 data-로 시작하는 이름을 지정하면, dataset으로 가져올 수 있다.
예를 들어 다음과 같은 html이 있을 때,
<!DOCTYPE html>
<html lang="ko">
...
<body>
<div
data-name="ori"
data-age="30"
data-super-long="superduperlong"
id="duck"
>
div입니다
</div>
<script src="index.js"></script>
</body>
</html>
js에서 이렇게 가져올 수 있음
const $duck = document.querySelector("#duck");
const { name, age, superLong } = $duck.dataset;
console.log(superLong); //superduperlong
'공부 > HTML, CSS' 카테고리의 다른 글
미디어 쿼리(feat. clamp()) (0) | 2024.07.25 |
---|