접두사 데이터 속성 및 데이터 세트를 사용하는 방법

이번에는 접두사 data-attribute 및 dataset 사용 방법에 대해 설명하겠습니다. 접두사 data-attribute 및 데이터 세트 사용 시 주의 사항은 무엇입니까?

HTML5에서는 렌더링과 관련되지 않은 요소에 대한 정보를 제공하거나 의미 정보를 제공하기 위해 비표준 속성을 요소에 추가할 수 있지만 data- 접두사가 붙을 수 있다고 규정합니다. 이러한 속성은 data-로 시작하는 한 임의로 추가하고 이름을 지정할 수 있습니다. 사용자 정의 속성을 추가한 후 해당 요소의 데이터세트 속성을 통해 사용자 정의 속성의 값에 액세스할 수 있습니다.

<p id="box" data-name=&#39;ghostwu&#39; data-age=&#39;22&#39; , data-sex=&#39;man&#39;>ghostwu tell you how to learn html5</p>
    <script>
        var oBox = document.querySelector("#box");
        console.log( oBox.dataset ) ;
        var myName = oBox.dataset.name;
        var myAge = oBox.dataset.age;
        var mySex = oBox.dataset.sex;
        if( oBox.dataset.name ) {
            console.log( oBox.dataset.name );
        }
    </script>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

H5의 드래그 앤 드롭 기능에 대한 자세한 설명

H5의 Canvas는 원형 진행률 표시줄을 만들고 숫자 백분율을 표시합니다.

H5의 LocalStorage 로컬 저장소 사용 자세한 설명

위 내용은 접두사 데이터 속성 및 데이터 세트를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!