지금 주인장은 Nest.js 공부 중 ···
리캡
HTML 데이터 속성 (data-) 속성에 접근하기
현우
Created by
- 현우
Created at
카테고리
Empty
데이터 속성은 사용자 정의 데이터를 HTML 요소에 저장하기 위해 사용되는 속성이다.
문장을 이어갈 때는 - 키워드를 통해 엘리먼트에 정의를 해주면 된다.
<div data-is-show="true" id="el"></div>위와 같이 data-is-show 속성이 데이터 속성에 해당되며, 자바스크립트에서 데이터 속성에 접근을 하려면 dataset 객체를 활용하면 된다. 여기서 확인해야할 점은 케밥 케이스로 작성했던 데이터 속성의 이름이 JS 의 카멜 케이스 형식으로 매핑된다는 것이다.
// js
const el = document.querySelector('#el');
console.log(el.dataset.isShow);CSS에서도 데이터 속성을 활용할 수 있는데, attr() 함수나 속성 선택자를 통해 데이터 속성의 값을 기반으로 스타일을 적용할 수 있다.
[data-is-show="true"] {
display: block;
}