HTML5에서 data-* 속성을 사용하는 방법

HTML5의 data- 속성은 더 나은 사용자 경험을 만들기 위해 주로 페이지에 개인 맞춤 데이터를 저장하는 데 사용됩니다.

오늘은 HTML에 많은 새로운 속성이 추가되었습니다. HTML5의 * 속성이 모든 사람에게 도움이 되기를 바랍니다.

【추천 강좌: HTML5 강좌】

data-* data-* 속성의 의미는 페이지나 애플리케이션의 비공개 맞춤 데이터를 저장하는 데 사용됩니다. 모든 HTML 요소에 대한 사용자 정의 데이터 속성이 저장하는 데이터는 JavaScript에서 더 나은 사용자 경험을 만드는 데 사용될 수 있습니다.

data-* 속성은 두 부분으로 구성됩니다.

속성 이름: 속성 이름에는 대문자를 사용할 수 없으며 접두사 "data-" 뒤에 문자가 하나 있어야 하며 비워둘 수 없습니다.

속성 값: 속성 값은 임의의 문자열일 수 있습니다.

<element data-*="somevalue">

예

data-animal-type="动物类"

데이터-* 속성 사용 방법

사용자 정의 데이터 속성은 유효한 HTML 5이므로 HTML 5 문서 유형을 지원하는 모든 브라우저에서 사용할 수 있습니다.

초기 저장을 설정할 수 있습니다. JavaScript 애니메이션에 필요할 수 있는 요소의 높이 또는 불투명도, JavaScript를 통해 로드된 Flash 동영상에 대한 매개변수 설정, 사용자 정의 웹 분석 태그 데이터 저장 등이 가능합니다.

예:

<script>
function showDetails(animal) {
    var animalType = animal.getAttribute("data-animal-type");
  console.log(animal.innerHTML + "是一种" + animalType + "。");

}
</script>
点击li时显示其类别


  
小猫咪
  
苹果
  

렌더링:

클릭 전

클릭 후

참고

데이터 속성은 다음에 적합하지 않습니다. 존재와 같은 모든 문제 기존 속성이나 요소가 데이터 저장에 적합한 경우 더 많은 데이터 속성을 사용해서는 안 됩니다. 예를 들어 날짜/시간 데이터는 사용자 정의 데이터 속성에 저장되기보다는 의미론적으로 표시되어야 하며 특정 데이터 속성은 스타일이 지정된 CSS에 연결되어서는 안 됩니다. 또한 데이터 속성이 점점 더 널리 사용됨에 따라 명명 규칙의 충돌이 점점 더 커질 수 있으므로 명명 시 플러그인 또는 공용 속성 이름과 혼동하지 않도록 주의해야 합니다

요약: 그게 다입니다. 이 기사의 전체 내용은 여기에 있습니다. HTML5를 배우는 모든 사람에게 도움이 되기를 바랍니다.

위 내용은 HTML5에서 data-* 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!