HTML 데이터 속성 안내서

목차

1. 소개
2. 문법
3. 데이터 속성을 사용한 스타일
4. JavaScript에서 데이터 속성에 액세스합니다

소개

HTML 요소는 접근성 정보에서 스타일 제어에 이르기까지 모든 목적으로 사용되는 속성을 가질 수 있습니다.

<div aria-label="Names" role="region"></div>

하지 않은 접근 방식은 자신의 속성을 만들 거나 관련없는 기능에 대한 기존 속성을 재사용하는 것입니다.

<div highlight="true"></div>
<div width="large"></div>

이것을하는 데 많은 나쁜 이유가 있습니다. HTML은 유효하지 않아 실제 부정적인 영향을 미치지 않지만 효과적인 HTML의 따뜻하고 퍼지 느낌을 잃게됩니다. 가장 설득력있는 이유는 HTML이 진화하는 언어이기 때문에 오늘날 작동하지 않는 속성과 가치가 미래에 결코 작동하지 않을 것이라는 의미는 아닙니다.

좋은 소식은 다음과 같습니다. 자신의 속성을 만들 수 있습니다. data-* 원하는대로 할 수 있습니다!

문법

자신의 HTML 속성을 만들고 자신의 정보를 넣을 수있는 것이 매우 편리합니다. 운 좋게도 할 수 있습니다! 이것이 데이터 속성이 사용되는 것입니다. 그들은 다음과 같이 보입니다.

<div data-foo=""></div>
<div data-size="large"></div>

데이터 속성은 종종이 형식이므로 data-* 속성이라고합니다. 단어 data , 그런 다음 대시 - 그런 다음 다른 텍스트를 생각할 수 있습니다.

데이터 속성 만 사용할 수 있습니까?

<div data=""></div>

이것은 피해를 입지 않을 수 있지만,이 안내서의 뒷부분에서 다룰 JavaScript API를 얻을 수는 없습니다. 당신은 실제로 소개에서 언급했듯이 자신을위한 속성을 만들고 있습니다.

데이터 속성으로 수행해서는 안됩니다

액세스 할 수있는 콘텐츠를 저장하십시오. 콘텐츠를 페이지에서 보거나 읽어야하는 경우 데이터 속성에 넣지 말고 컨텐츠가 HTML 컨텐츠 어딘가에 있는지 확인하십시오.

<div data-name="Chris Coyier"></div>
<div>
  Chris Coyier
</div>

다음은 숨겨진 콘텐츠에 대한 자세한 내용입니다.

데이터 속성을 사용한 스타일

CSS는 속성 및 해당 값에 따라 HTML 요소를 선택할 수 있습니다.

 /*이 데이터 속성 및 값으로 요소를 선택하십시오*/
[data-size = "large"] {
  패딩 : 2REM;
  글꼴 크기 : 125%;
}
/* 요소 또는 클래스 또는 다른 것으로 제한 할 수 있습니다*/
버튼 [data-type = "download"] {}
.card [data-pad = "extra"] {}

이것은 매력적 일 수 있습니다. HTML/CSS의 주요 스타일 훅은 클래스이며 클래스는 훌륭하지만 ( classList 통해 중간 특이성과 멋진 JavaScript 메소드가 있습니다) 요소는 그것을 가지고 있거나 가지고 있지 않습니다 (기본적으로 켜거나 끄기 ). data-* 속성을 사용하면이 턴온/끄기 기능 과 동일한 특이성 수준에서 값을 기준으로 선택할 수있는 기능을 얻을 수 있습니다.

 / * 부동산이 존재하는 경우 */를 선택하십시오.
[데이터 크기] {}
/* 속성에 특정 값이 있는지 여부*/
[data-state = "open"],
[aria-expanded = "true"] {}
/ * "시작 ..."선택기, 이것은 "3"또는 "3.14" */와 같은 3으로 시작하는 문자와 일치한다는 것을 의미합니다.
[data-version^= "3"] {}
/ * "포함"값에 값에 문자열이 포함 된 경우 */
[Data-Company*= "Google"] {}

속성 선택기의 특이성

클래스와 정확히 동일합니다. 우리는 일반적으로 특이성을 4 부분으로 구성하는 값으로 간주합니다.

인라인 스타일, ID, 클래스/속성, 태그

따라서 개별 속성 선택기는 0, 0, 1, 0 입니다. 다음과 같은 선택기 :

 div.card [data-foo = "bar"] {}

0, 0, 2, 1 입니다. 2는 클래스 ( .card )와 속성 ( [data-foo="bar"] )가 있고 1은 태그 ( div )가 있기 때문입니다.

속성 선택기의 특이성은 클래스와 동일한 요소/태그보다 높은 ID보다 낮습니다.

사례에 민감한 속성 값

데이터 속성에서 가능한 사례 불일치를 수정 해야하는 경우 속성 선택기는 이에 대한 사례에 민감한 변형을 제공합니다.

 /*는 일치합니다<div data-state="open"></div>
<div data-state="Open"></div>
<div data-state="OPEN"></div>
<div data-state="oPeN"></div>
*/
[data-state = "Open"I] {}

사각형 브래킷 선택기의 소문자 i 입니다.

사용 데이터 속성을 시각화합니다

CSS를 사용하면 데이터 속성 값을 추출하여 필요할 때 표시 할 수 있습니다.

 /*<div data-emoji="✅"> */
[data-emoji] :: 이전 {
  내용 : attr (data-emoji); / * 반품 '✅' */
  마진 오른쪽 : 5px;
}<h4 id="스타일-사용의-예"> 스타일 사용의 예</h4>
<p> 데이터 속성을 사용하여 그리드 컨테이너에 필요한 열 수를 지정할 수 있습니다.</p>
<pre class="brush:php;toolbar:false"><div data-columns="2"></div>
<div data-columns="3"></div>
<div data-columns="4"></div>

JavaScript에서 데이터 속성에 액세스합니다

다른 속성과 마찬가지로 공통 메소드 getAttribute 사용하여 값에 액세스 할 수 있습니다.

 value = el.getAttribute ( "data-state");
// 값을 설정할 수도 있습니다.
// return data-state = "붕괴"
el.setattribute ( "data-state", "붕괴");

그러나 데이터 속성에는 고유 한 특별 API도 있습니다. 여러 데이터 속성이있는 요소가 있다고 가정합니다 (절대적으로 괜찮습니다).

요소가 참조가 있으면 다음과 같은 속성을 설정하고 얻을 수 있습니다.

 // get span.dataset.info; // 123
span.dataset.index; // 2
// span.dataset.prefix = "Mr.";
span.dataset.emojiicon = "?";

마지막 줄의 낙타 명명법에 유의하십시오. HTML (예 : data-this-little-piggy )의 Kebab 스타일 속성을 JavaScript (예 : dataThisLittlePiggy )의 Camel Nomenclature로 자동 변환합니다.

이 API는 classList 만큼 좋지 않으며, classList 추가, 삭제, 전환 및 교체의 명확한 방법이 있지만 아무것도 아닌 것보다 낫습니다.

인라인 데이터 세트에도 액세스 할 수도 있습니다.

데이터 속성의 JSON 데이터

왜 안 돼? 유효한 JSON으로 형식화 할 수있는 문자열입니다 (인용문 등). 데이터를 추출하고 필요에 따라 구문 분석 할 수 있습니다.

 const el = document.querySelector ( "li");
json = el.dataset.person을 보자;
데이터 = JSON.PARSE (JSON);
Console.log (data.name); // Chris Coyier
Console.log (data.job); // 웹 사람

JavaScript 사용 사례

개념은 데이터 속성을 사용하여 정보를 HTML에 넣을 수 있다는 것입니다. 특정 작업을 수행하기 위해 JavaScript가 액세스해야 할 수 있습니다.

일반적인 예는 데이터베이스 기능과 관련이 있습니다. "좋아요"버튼이 있다고 가정합니다.

♡

이 버튼을 클릭하면 클릭하면 데이터베이스의 좋아요 수를 증가시킬 때 서버에 대한 AJAX 요청을 수행하는 핸들러를 클릭 할 수 있습니다. 데이터 속성에서 얻을 수 있기 때문에 업데이트 할 레코드를 알고 있습니다.

사양

• 선택기 레벨 4 (작업 초안)
• 선택기 레벨 3 (권장)
• 선택기 레벨 2, 개정 1 (초기 정의)

브라우저 지원

이 브라우저는 Caniuse의 데이터를 지원하며 자세한 내용이 포함되어 있습니다. 이 숫자는 브라우저 가이 기능과 이후 버전 에서이 기능을 지원한다는 것을 나타냅니다.

데스크탑

모바일/태블릿 PC