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

이번에는 H5의 data-* 사용자 정의 속성 사용에 대한 자세한 설명을 가져왔습니다. H5의 data-* 사용자 정의 속성을 사용할 때 주의 사항은 무엇인가요?

1. html 요소의 특성에 대하여

1. html 요소에는 몇 가지 표준 특성이 있습니다.

id 문서에 있는 요소의 고유 식별자

제목 요소에 대한 추가 설명 정보입니다. 일반적으로 도구 팁 표시줄이 표시됩니다.

dir 언어 방향은 거의 사용되지 않습니다.

className은 요소의 클래스 속성에 해당합니다. ECMAScript 클래스의 예약어가 충돌하므로 className으로 명명됩니다.

getAttribute() 관련 특성을 가져오고, DOM 특성을 사용하는 것과 다른 사용자 정의 특성도 가져올 수 있습니다.

setAttribute() 관련 속성 설정

RemoveAttribute() 관련 속성 삭제

예:

var header=document.getElementById('header');
console.log(header.id);//header
console.log(header.getAttribute('id'));//header
console.log(header.title);//test
console.log(header.getAttribute('title'));//test
console.log(header.myTitle);//undefined
console.log(header.getAttribute('myTitle'));//monster1935

이유:

html 요소의 표준 속성만 속성 형식으로 DOM 개체에 추가됩니다.

특수 사례:

DOM 객체에 해당 속성 이름이 있지만 속성 값은 getAttribute()에서 반환된 값과 동일하지 않습니다.

이벤트 처리

DOM 객체의 속성을 사용하여 접근하면 JavaScript 함수가 반환되고, getAttribute() 메서드를 통해 가져오면 javas 코드가 반환됩니다.

사용법:

사용자 정의 속성을 얻을 때 getAttribute() 메서드만 사용하세요. DOM을 운영할 때 객체의 속성을 사용하여 가져옵니다.

2. Html5의 사용자 정의 속성

1. Html5 사양에서는 렌더링과 관련 없는 정보를 제공하기 위해 사용자 정의 속성 앞에 data-가 붙어야 한다고 규정합니다.

var user=document.getElementById('user');
//使用attributes方法操作属性
//获取相关属性值
var name=user.getAttribute('data-name');
console.log(name)//monster1935
var age = user.getAttribute('data-age');
console.log(age);//123
//设置相关属性值
user.setAttribute('data-sex','male');
console.log(user.getAttribute('data-sex'));//male

3. 데이터세트를 사용하여 사용자 정의 속성을 작동합니다.

예:

var el=document.querySelector('#user');
console.log(el.id);
console.log(el.dataset); //返回的是一个DomStringMap对象
console.log(el.dataset.name);
console.log(el.dataset.age);
// 设置相关属性
el.dataset.home="shandong";
console.log(el.dataset);
// 删除相关属性
// delete el.dataset.home;
el.dataset.home = null;
console.log(el.dataset);

또 한 가지 주의할 점은 데이터 속성 이름에 하이픈이 포함되어 있다는 것입니다(예: 데이터-생년월일). ), 매핑의 해당 속성은 dateOfBirth이며 표시를 위해 해당 카멜 케이스 형식으로 변환됩니다.

4.데이터세트 속성의 호환성 문제

Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+5.데이터 사용-

1.获取相关DOM元素

<style>
  p{
    width:100px;
    height:200px;
    margin:20px;
  }
  p[data-name="monster"]{
    background-color: green;
  }
  p[data-name="monster1935"]{
    background-color: red
  }
</style>

위 내용은 H5의 데이터-* 사용자 정의 속성 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!