19 - HTML 데이터 속성

7550 단어 htmlTILTIL

데이터 속성

  • 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에서 접근 방법

  • 선택자[ ] {}로 접근한다.