H5의 data-* 속성 사용 방법 요약

이번에는 H5에서 data-* 속성을 사용하는 방법에 대해 요약해보겠습니다. H5에서 data-* 속성을 사용할 때 주의사항은 무엇인가요?

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

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

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

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

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

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

2. 작동 특성 방법:

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

setAttribute() 관련 속성 설정

RemoveAttribute() 관련 속성 삭제

3 html 요소 속성을 얻기 위해 getAttribute()를 사용하는 것과 DOM 요소의 속성을 직접 사용하는 것의 차이점은 다음과 같습니다.

예:

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 요소의 표준 속성과 사용자 정의 속성을 얻는 두 가지 방법을 보여줍니다.

getAttribute()는 표준 기능과 사용자 정의 기능 모두에 액세스할 수 있지만 DOM 요소 자체의 속성을 사용하여 html 요소 기능에 액세스할 때는 표준 기능에만 액세스할 수 있습니다.

이유:

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

특수 사례:

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

1. 스타일 기능:

DOM 개체 속성을 사용하여 스타일에 액세스하면 개체가 반환되고, getAttribute() 메서드를 사용하여 가져오면 CSS 텍스트가 반환됩니다.

2.

이벤트 처리

프로그램(예: onclick):

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

사용법:

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

2. Html5의 사용자 정의 속성

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

2. 사용자 정의 속성을 조작하려면 getAttribute() 메소드와 setAttribute() 메소드를 사용하십시오.

예:

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

위의 예에서는 getAttribute() 및 setAttribute() 메서드를 사용하여 html 요소의 사용자 정의 속성을 조작하는 방법을 보여줍니다.

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);

위 예에서는 데이터세트 속성을 사용하여 사용자 정의 속성을 작동하는 방법을 보여줍니다. 데이터 세트 속성의 값은 이름-값 쌍의 맵인 DOMStringMap의 예입니다. 이 매핑에서 data-name 형식의 각 속성에는 해당 속성이 있습니다. 차이점은 속성 이름에 data- 접두사가 없다는 것입니다. (예를 들어 사용자 정의 속성이 데이터 이름인 경우 매핑의 해당 속성은 이름입니다.)

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

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

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

속성 선택기

1.获取相关DOM元素

var elem=document.querySelectorAll("[data-name='monster1935']");

2.设置相关css样式

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎么实现JS同步、异步、延迟加载

怎样使用@angular/cli V6.0开发PWA应用

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