HTML5의 data-* 사용자 정의 속성은 무엇입니까?

HTML5의 data-* 사용자 정의 속성

HTML5에는 data-* 사용자 정의 속성인 사용자 정의 데이터 속성인 새로운 기능이 추가되었습니다. HTML5에서는 data-를 접두어로 사용하여 일부 데이터를 저장하는 데 필요한 사용자 정의 속성을 설정할 수 있습니다. 물론 고급 브라우저의 스크립트를 통해 정의 및 데이터 액세스를 수행할 수 있습니다. 프로젝트 실습에 매우 유용합니다. 현재 이 접근 방식을 채택하는 프레임워크가 많이 있으며 가장 일반적인 프레임워크는 jQueryMobile입니다.
구체적인 사용 예는 다음과 같습니다.

<p id = "head" data-home = "http://blog.csdn.net/xmtblog" data-author = "伪专家"></p>

기존 방법에서는 다음과 같이 jquery와 함께 사용할 수 있습니다.

$("#head").attr("data-home");  
$("#head").attr("data-home","new");

또는 순수 js 방법:
IE 브라우저에서는 객체를 가져온 후 직접 호출할 수 있습니다.

document.getElementById("head").["data-home"];  
document.getElementById("head").["data-home"] = "new";

Firefox와 Google Chrome에서는 getAttribute 메소드를 통해 호출할 수 있습니다.

document.getElementById("head").getAttribute("data-home");  
document.getElementById("head").setAttribute("data-home","new");

HTML5의 간결한 작업 메소드: (dataset 속성은 data-*custom 속성 값에 액세스합니다.)
이런 방식으로 요소의 data-* 사용자 정의 속성의 값에 액세스하려면 데이터 세트 속성을 사용하세요. 데이터 세트 속성은 HTML5 JavaScript API의 일부이며 선택한 모든 요소의 data- 속성과 함께 DOMStringMap 객체를 반환하는 데 사용됩니다.
이 방법을 사용할 때는 data-home과 같은 완전한 속성 이름을 사용하여 데이터에 액세스하는 대신 data- 접두사를 제거해야 합니다.
또 한 가지 주의할 점은 데이터 속성 이름에 하이픈이 포함된 경우(예: data-date-of-birth) 하이픈이 제거되고 이전 속성 이름은 dateOfBirth로 변환되어야 한다는 것입니다. .

<p id = "head" data-home = "http://blog.csdn.net/xmtblog" data-author = "伪专家" data-date-of-birth>QQ群：135430763</p>  <script type="text/javascript">  
    var el = document.querySelector(&#39;#head&#39;);  
    console.log(el.id);   
    console.log(el.dataset);//一个DOMStringMap  
    console.log(el.dataset.home);   
    console.log(el.dataset.author);   
    console.log(el.dataset.dateOfBirth);   
    el.dataset.dateOfBirth = &#39;1985-01-05&#39;; // 设置data-date-of-birth的值.  
    //判断属性  
    console.log(&#39;testAttr&#39; in el.dataset);//false  
    el.dataset.testAttr = &#39;testAttr&#39;;  
    console.log(&#39;testAttr&#39; in el.dataset);//true  </script>

데이터 속성을 삭제하려면 다음과 같이 하면 됩니다: delete el.dataset.home; 또는 el.dataset.home = null;.
이렇게 조작하면 참 편리하지 않나요? 그러나 일부 브라우저에서는 아직 이를 지원하지 않을 수 있습니다. 따라서 이 기간 동안에는 getAttribute, setAttribute 등을 이용하여 조작하거나 jquery와 함께 활용하는 것이 가장 좋습니다.
데이터 속성 선택기
실제 개발 과정에서 맞춤형 데이터 속성을 기반으로 관련 요소를 선택할 수 있습니다. 예를 들어, querySelectorAll을 사용하여 요소를 선택합니다.
//'data-p' 속성을 포함하는 모든 요소 선택
document.querySelectorAll ('[data-p]')
//'data-a-를 포함하는 모든 요소 선택 href' 속성 값은 빨간색 요소입니다
document.querySelectorAll ('[data-a-href="#"]')
마찬가지로 data-속성 값을 통해 해당 요소에 CSS 스타일을 설정할 수도 있습니다. 다음 예:

<style type ="text/css">  
    .head {  
         width : 256px ;  
         height : 200px ;  
     }  

    .head[data-a=&#39;btn-a&#39;] {  
         color : brown  
    }  

    .head[data-a=&#39;btn-color&#39;] {  
         color : red  
    }  
</style>  
<p class = "head" data-qq = "7" data-a = "btn-a" > button按钮 </p>  
<p class = "head" data-qq = "1" data-a = "btn-color" > button按钮</p>

위 내용은 HTML5의 data-* 사용자 정의 속성은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!