HTML5 데이터-* 사용자 정의 속성에 대한 자세한 설명

jQuery의 attr 및 prop에는 IE9 이전 버전에서 속성을 잘못 사용하면 메모리 누수가 발생한다고 언급되어 있으며 HTML5에서는 속성을 사용자 정의하기 위해 data-* 메서드가 추가되었습니다. 소위 data-*는 실제로 data- 접두사에 사용자 정의 속성 이름을 더한 것입니다. 이러한 구조를 사용하여 데이터를 저장할 수 있습니다. data-*를 사용하면 혼란스럽고 관리되지 않는 사용자 정의 속성의 현재 상황을 해결할 수 있습니다.

data-*에는 두 가지 설정 방법이 있으며 HTML 요소 태그에 직접 작성할 수 있습니다.

 <div id=test data-age=24> 여기를 클릭하세요 </div>

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

 var test = document.getElementById('test'); test.dataset.my = '바이런';

이렇게 하면 div에 data-my라는 사용자 정의 속성이 추가됩니다. JavaScript를 사용하여 데이터 세트를 작동할 때 주의해야 할 두 가지 사항이 있습니다.

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

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

지금 바로 코드에 콘텐츠를 추가하세요.

 <style type=text/css> [데이터-생년월일] { 배경색: #0f0px 여백:20px;

 test.dataset.birthDate = '19890615';

이런 식으로 JavaScript를 통해 데이터-생년월일 사용자 정의 속성을 설정하고 CSS 스타일 시트의 div에 일부 스타일을 추가하여 효과를 확인했습니다.

읽을 때 속성을 얻기 위해 .

 var test = document.getElementById('test'); test.dataset.my = 'Byron'; test.dataset.birthDate = '19890615'; test.onclick = function () { 경고(this.dataset.my + ' ' + this.dataset.age+' '+this.dataset.birthDate) }

어떤 학생들은 이름 지정 외에 getAttribute/setAttribute 사이에 차이점이 있는지 물어볼 수 있습니다.

 var test = document.getElementById('test'); test.dataset.birthDate = '19890615'; test.setAttribute('age', 25); test.setAttribute('data-sex', 'male'); log(test.getAttribute('data-age')); //24 console.log(test.getAttribute('data-birth-date')); //19890516 console.log(test.dataset.age); //24 console.log(test.dataset.sex);

여기에서 우리는 둘 다 속성을 속성으로 설정한다는 것을 알 수 있습니다(말도 안되는 소리, 그렇지 않으면 사용자 정의 속성이라고 부를 수 있음). 이는 getAttribute/setAttribute가 모든 데이터세트 콘텐츠에 대해 작동할 수 있고 데이터세트 콘텐츠는 특수 속성의 하위 집합일 뿐이라는 것을 의미합니다. 중요한 것은 이름이지만 데이터 세트에는 data- 접두사가 있는 속성만 있습니다(age=25는 없습니다).

그렇다면 여전히 data-*를 사용하는 이유는 무엇일까요? 가장 큰 장점 중 하나는 데이터 세트 개체에서 모든 사용자 정의 속성을 통일된 방식으로 관리할 수 있다는 점입니다. 흩어지지 않고 모든 것을 탐색하는 것이 매우 편리하므로 여전히 사용하는 것이 좋습니다.

나쁜 소식은 data-*의 브라우저 호환성이 매우 비관적이라는 것입니다.

1. 인터넷 익스플로러 11+
2. 크롬 8+
3. 파이어폭스 6.0+
4. 오페라 11.10+
5. 사파리 6+

그 중 IE11+는 단순히 친구들의 눈을 멀게 하고 있습니다. 이 속성을 완전히 활용하려면 아직 갈 길이 멀 것 같습니다.

위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.