HTML을 보면 data-role, data-theme 등을 사용하는 것을 종종 볼 수 있습니다. 예를 들어, 헤더 효과는 다음 코드를 통해 얻을 수 있습니다.
<div data-role=header> <h1>제가 직위입니다</h1> </div>
data-role=header 작성하면 하단이 검은색이고 텍스트가 가운데 정렬되는 효과를 얻을 수 있는 이유는 무엇입니까?
이 기사에서는 모든 사람이 이러한 사용법을 직관적으로 이해할 수 있도록 가장 간단한 구현 방법을 제공합니다.
HTML 페이지를 작성하고 data-chb=header 속성을 사용자 정의합니다. 이 속성이 있는 div 영역의 배경색은 검은색이고 텍스트는 흰색이며 해당 div가 중앙에 표시되기를 바랍니다. data-chb 사용자 정의 속성이 기본 방식으로 표시되지 않으면 html 코드는 다음과 같습니다.
<body> <div data-chb=header> <h1>div에 data-chb 맞춤 속성을 사용했습니다.</h1> </div> <br/> <div> data-chb 맞춤 속성을 사용하지 않았습니다. . 원하는 대로 표시하세요. </div> </body>
배경색이 검은색이고 텍스트가 흰색이며 디스플레이가 중앙에 위치하는 디스플레이 효과를 얻기 위해 다음 CSS를 정의합니다.
<style> .ui_header { 배경색: 검정색; 텍스트 정렬: 색상: 흰색; 테두리: 1px 솔리드 #000 }그런 다음 다음 js 메서드를 사용하여 CSS 정의를 동적으로 추가하고 페이지가 로드될 때 data-chb 속성을 사용하여 div의 표시 스타일을 변경합니다.
<script type=text/javascript> window.onload=function(){ var elems = document.getElementsByTagName(div); if(elems!=null&&elems.length>0){ var length = elems.length; Control for(var i=0;i<length;i++){ var elem = elems[i] //컨트롤의 사용자 정의 속성 가져오기 var customAttr = elem.dataset.chb; //다음 방법으로 사용자 정의 속성을 얻을 수도 있습니다. //var customAttr = elem.dataset[chb]; //미리 정의한 헤더 값인 경우 처리된 if(customAttr==header ){ //스타일 추가 elem.setAttribute(class,ui_header) } } } } </script>물론 위의 기능 외에도 이 속성에는 JS를 통한 데이터 구성, 데이터 채우기 등과 같은 다른 기능도 있습니다.
요약위 내용은 편집자가 소개한 HTML5: 'data-' 속성입니다. 궁금한 점이 있으면 메시지를 남겨주시면 편집자가 시간에 맞춰 답변해 드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!