HTML에서 사용자 지정 데이터 특성 (data-*)
HTML5부터 추가된 내용으로 HTML 태그 내에 'data-'로 시작하는 속성을 설정해서, 사용자 지정 데이터 특성이라는 특정 클래스를 형성할 수 있다. 임의의 데이터를 스크립트로 HTML와 DOM 사이에서 교환할 수 있다.
- data-속성명 : "속성값"
모든 html element에서 사용이 가능하며, 모든 문자열은 속성의 값이 될 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="div1" data-width="200" data-height="100" data-bg-color="blue"></div>
</body>
</html>
아래 예시처럼 태그에 data-속성명을 통해서 값을 저장할 수 있고, 해당 값의 경우에는 DOM이 생성될 때 "data-"로 시작하는 속성들을 하나로 모아서 "dataset"으로 따로 모아서 관리하게 된다. JavaScript에서는 속성명을 camelCase로 변환한다. bg-color가 bgColor로 변경된 모습을 볼 수 있다.
JavaScript에서 사용자 지정 데이터 특성 사용하기
HTML 태그의 data-*를 가져오는 방법은 'getAtrribute()'와 'dataset.속성명'으로 2가지 방법이 있다.
- 요소.getAttribue("data-속성명");
- 요소.dataset.속성명;
DOM이 생성될 때 "dataset"으로 따로 모아서 관리하는데 속성명을 camelCase로 변환하기 때문에 '-' 뒤에 오는 영문자의 경우 대문자로 시작해야 한다. (ex: bg-color --> bgColor)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="div1" data-width="200" data-height="100" data-bg-color="blue"></div>
<script>
let div = document.querySelector("#div1");
// getAttribute를 활용해서 가져오기
div.style.width = div.getAttribute("data-width") + "px";
// dataset을 활용해서 가져오기
div.style.height = div.dataset.height + "px";
div.style.backgroundColor = div.dataset.bgColor;
</script>
</body>
</html>'Frontend > JavaScript' 카테고리의 다른 글
| JavaScript : 비동기를 처리하는 방법 (Promise) (0) | 2024.08.11 |
|---|---|
| JavaScript : Geolocation API를 사용하여 현재 위치를 가져와보자 (0) | 2024.08.11 |
| JavaScript 내장함수 : Object관련 내장함수 (0) | 2024.08.10 |
| JavaScript : Symbol에 대해서 알아보자 (0) | 2024.08.06 |
| JavaScript : 구조분해할당(Distructuring)에 대해 알아보자 (1) | 2024.08.05 |
| JavaScript : Array관련 내장함수 (0) | 2024.08.04 |
| JavaScript 내장함수 : String관련 내장함수 (0) | 2024.08.04 |
| JavaScript 내장함수 : 숫자 관련 내장함수 (0) | 2024.08.04 |