HTML5의 사용자 정의 속성 데이터-* 자세한 소개 및 JS 작동 예제

저자：Eve Cole 업데이트 시간：2025-05-30 20:16:01

댓글 : HTML5는 사용자 정의 데이터 속성, 즉 데이터-* 사용자 정의 속성에 새로운 기능을 추가했습니다. HTML5에서는 데이터와 함께 접두사를 사용하여 일부 데이터를 저장하는 데 필요한 사용자 정의 속성을 설정할 수 있습니다.

물론 고급 브라우저에서 스크립트를 통해 데이터를 정의하고 액세스 할 수 있습니다. 프로젝트 실무에 매우 유용합니다.

예를 들어:

속성 메소드를 사용하여 데이터 값에 액세스하십시오.* 사용자 정의 속성

속성 메소드를 사용하여 데이터-* 사용자 정의 속성에 액세스하는 것이 매우 편리합니다.

// getAttribute를 사용하여 데이터 속성을 얻습니다

var 사용자 = 문서. getElementById ( '사용자');

var username = plant. getAttribute ( 'data-uname'); // username = '스크립트 하우스'

var userid = 식물. getAttribute ( 'data-uid'); // userId = '12345'

// setAttribute를 사용하여 데이터 속성을 설정하십시오

사용자. setAttribute ( 'data-site', 'http://www.vevb.com');

이 방법은 모든 최신 브라우저에서 잘 작동하지만 사용하기 위해 사용되는 HTML 5의 사용자 정의 데이터* 속성은 아닙니다. 그렇지 않으면 예를 들어 이전에 사용한 사용자 정의 속성과 다르지 않습니다.

<cript>

// getAttribute를 사용하여 데이터 속성을 얻습니다

var 사용자 = 문서. getElementById ( '사용자');

var username = plant. getAttribute ( 'unam'); // username = '스크립트 하우스'

var userid = 식물. getAttribute ( 'uid'); // userId = '12345'

// setAttribute를 사용하여 데이터 속성을 설정하십시오

사용자. setAttribute ( '사이트', 'http://www.vevb.com');

</스크립트>

이 "원래"사용자 정의 속성은 위의 데이터* 사용자 정의 속성과 다르지 않으며 지식 속성 이름은 다릅니다.

데이터 세트 속성은 데이터-* 사용자 정의 속성의 값에 액세스합니다

이러한 방식으로, 요소의 데이터 세트 속성에 액세스하여 데이터-* 사용자 정의 속성의 데이터 세트 속성 값에 액세스합니다. 이 데이터 세트 속성은 HTML5 JavaScript API의 일부이며 선택한 모든 요소 데이터 속성이있는 DomStringMap 객체를 반환하는 데 사용됩니다.

이 메소드를 사용하는 경우 Data-Uid와 같은 전체 속성 이름을 사용하는 대신 데이터 접두사를 제거해야합니다.

또 다른 특별 노트는 다음과 같습니다. 데이터 속성 이름에 하이픈이 포함 된 경우 다음과 같습니다. 이전 속성 이름을 변환해야합니다 : dateofbirth.

var el = document.querySelector ( '#user');

Console.log (el.id); // '사용자'

console.log (el.dataset); // domstringmap

Console.log (el.dataset.id); // '1234567890'

Console.log (el.dataset.name); // '스크립트 하우스'

console.log (el.dataset.dateofbirth); // ''

el.dataset.dateofbirth = '1985-01-05'; // 바로 데이터 날짜의 값을 설정합니다.

console.log (el.dataset의 'somedataattr'); // false

el.dataset.somedataattr = 'mydata';

console.log (el.dataset의 'somedataattr'); // true

</스크립트>

DataProperty를 삭제하려면 다음을 수행 할 수 있습니다. EL을 삭제하십시오. 데이터 세트. ID ; 또는 el .dataset. id = null; .

불행히도 새 데이터 세트 속성은 Chrome 8+ Firefox (Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+ 브라우저에서만 구현 되므로이 기간 동안 GetAttribute 및 SetAttribute에 가장 적합한 사용이 가능합니다.

데이터 프로페티 선택기에 대해

실제 개발에서는 유용 할 수 있습니다. 사용자 정의 데이터 속성에 따라 관련 요소를 선택할 수 있습니다. 예를 들어, QuerySelectorall을 사용하여 요소를 선택하십시오.

// '데이터 플라워'속성이 포함 된 모든 요소를 선택합니다

문서 . QuerySelectorall ( '[Data-Flowering]');

// 'data-text-colour'속성 값 빨간색으로 모든 요소를 선택하십시오.

문서 . QuerySelectorall ( '[data-text-colour = "red"]');

마찬가지로 다음 예제와 같은 데이터 속성 값을 통해 해당 요소에 대한 CSS 스타일을 설정할 수도 있습니다.

<스타일 유형 = "텍스트/CSS">

.user {

너비 : 256px;

높이 : 200px;

}

.user [data-name = 'feiwen'] {

색상 : 갈색

}

.user [data-name = 'css'] {

색상 : 빨간색

}

</스타일>