이번에는 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 요소의 표준 속성만 속성 형식으로 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
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.데이터 사용-
위 내용은 H5의 data-* 속성 사용 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!