html5 data-* 페이지 또는 애플리케이션에 대한 개인 사용자 정의 데이터를 저장하는 속성

예

data-* 속성을 사용하여 사용자 정의 데이터 삽입:

<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li> 
<li data-animal-type="spider">Tarantula</li> 
</ul>

브라우저 지원

IE, Firefox, Chrome, Safari, Opera

모든 주요 브라우저는 data-* 속성을 지원합니다.

정의 및 사용법

data-* 속성은 페이지 또는 애플리케이션에 대한 개인 사용자 정의 데이터를 저장하는 데 사용됩니다.

data-* 속성을 사용하면 모든 HTML 요소에 사용자 정의 데이터 속성을 포함할 수 있습니다.

저장된(사용자 정의) 데이터는 페이지의 JavaScript 내에서 활용되어 더 나은 사용자 경험을 만들 수 있습니다(Ajax 호출이나 서버 측 데이터베이스 쿼리 없이).

data-* 속성에는 다음 두 부분이 포함됩니다.

• 속성 이름에는 대문자가 포함될 수 없으며 접두사 "data-" 뒤에는 문자가 하나 이상 있어야 합니다.

• 속성 값은 무엇이든 가능합니다. string

참고: 사용자 에이전트는 "data-" 접두사가 붙은 사용자 정의 속성을 완전히 무시합니다.

HTML 4.01과 HTML5의 차이점

data-* 속성은 HTML5의 새로운 기능입니다.

Syntax

<element data-*="somevalue">

속성 값

value	Description
somevalue	속성 값을 지정합니다(문자열로).

jQuery의 attr과 prop에는 IE9 이전 버전에서 속성을 잘못 사용하면 메모리 누수가 발생한다고 언급되어 있고, HTML5에서는 Attribute와 Property의 차이도 매우 귀찮습니다. * 속성을 사용자 정의하는 방법. 소위 data-*는 실제로 data- 접두사에 사용자 정의된 속성 이름을 더한 것입니다. 데이터는 이 구조를 사용하여 저장될 수 있습니다. data-*를 사용하면 혼란스럽고 관리되지 않는 사용자 정의 속성의 현재 상황을 해결할 수 있습니다.

읽기 및 쓰기 방법

data-*에는 두 가지 설정 방법이 있습니다. HTML 요소tag

<div id="test" data-age="24">
        Click Here
    </div>

에 직접 쓸 수 있습니다. data-age는 사용자 정의 속성입니다. 물론 JavaScript를 사용하여 설정할 수도 있습니다. 작동하려면 HTML5의 요소에는 DOMStringMap 유형의 키-값 쌍 모음인 데이터세트 속성이 있습니다

var test = document.getElementById('test');
        test.dataset.my = 'Byron';

이러한 방식으로 data-my 사용자 정의 속성이 JavaScript 사용에 추가됩니다. 주의할 점

1. 속성을 추가하거나 읽을 때 접두사 data-*를 제거해야 합니다. 위의 예와 같이 test.dataset.data-my = 'Byron'; 형식을 사용하지 않습니다.

2. 속성 이름에도 하이픈(-)이 포함된 경우 카멜 표기법으로 변환해야 하지만 CSS에서 선택자를 사용하는 경우 하이픈 형식을 사용해야 합니다

위 내용은 html5 data-* 페이지 또는 애플리케이션에 대한 개인 사용자 정의 데이터를 저장하는 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!