19 - HTML 데이터 속성
데이터 속성
- HTML5에서 새로 확장된 속성
- 표준 HTML 요소에 추가적인 정보를 저장할 수 있어 유용함
문법
- data-(사용자 정의)
<section
id="blog"
data-index="1"
data-title="cat"
data-date="2010-03-04">
...
</section>
JavaScript에서 접근 방법
HTML요소.dataset.정의한이름
정의한이름
에서data-
가 삭제되고 카멜표기법으로 변환된다.- data-camel-string -> dataset.CamelString
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title>JavaScript-Sample</title>
<script type="text/javascript" def src="document.js"></script>
</head>
<body>
<button id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth">click</button>
</body>
</html>
const el = document.querySelector("#user");
// set the data attribute
console.log(el.dataset.dateOfBirth); // undefined
el.dataset.dateOfBirth='1960-05-31';
console.log(el.dataset.dateOfBirth); // '1960-05-31'
console.log(el.dataset.id); // '1234567890'
data-id의 값을 다시 설정하고 읽을 수 있다.
CSS에서 접근 방법
- 선택자[ ] {}로 접근한다.
data-id의 값에 따라서 button의 width가 변화하는 모습을 볼 수가 있다.
Author And Source
이 문제에 관하여(19 - HTML 데이터 속성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@silviaoh/TIL-HTML-데이터-속성저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)