HTML5에는 data-* 사용자 정의 속성인 사용자 정의 데이터 속성이라는 새로운 기능이 추가되었습니다. HTML5에서는 data-를 접두어로 사용하여 일부 데이터를 저장하는 데 필요한 사용자 정의 속성을 설정할 수 있습니다.
물론 고급 브라우저는 스크립트를 통해 데이터를 정의하고 액세스할 수 있습니다. 프로젝트 실습에 매우 유용합니다.
예:
코드는 다음과 같습니다.
속성 메서드를 사용하여 데이터-* 사용자 정의 속성 값에 액세스
data-* 사용자 정의 속성의 값에 접근하기 위해 속성 메소드를 사용하는 것은 매우 편리합니다:
코드는 다음과 같습니다:
// 使用getAttribute获取 data- 属性 var user = document . getElementById ( 'user' ) ; var userName = plant . getAttribute ( 'data-uname' ) ; // userName = '脚本之家' var userId = plant . getAttribute ( 'data-uid' ) ; // userId = '12345' // 使用 set Attribute设置 data- 属性 user . setAttribute ( 'data-site' , 'http://www.jb51.net' ) ;
이 방법은 모든 최신 브라우저에서 정상적으로 작동할 수 있지만 HTML 5의 사용자 정의 data-* 속성의 목적은 아닙니다. 그렇지 않으면 이전에 사용한 사용자 정의 속성과 다르지 않습니다. 예를 들면 다음과 같습니다.
코드 다음과 같습니다:
<p id = "user" uid = "12345" uname = "脚本之家" > </p> <script> // 使用getAttribute获取 data- 属性 var user = document . getElementById ( 'user' ) ; var userName = plant . getAttribute ( 'uname' ) ; // userName = '脚本之家' var userId = plant . getAttribute ( 'uid' ) ; // userId = '12345' // 使用setAttribute设置 data- 属性 user . setAttribute ( 'site' , 'http://www.jb51.net' ) ; </script>
이 "원래" 사용자 정의 속성은 위의 data-* 사용자 정의 속성과 다르지 않지만 지식 속성 이름은 다릅니다.
data세트 속성은 data-* 사용자 정의 속성의 값에 액세스합니다.
이 메소드는 요소 값의 데이터 세트 속성에 액세스하여 data-* 사용자 정의 속성에 액세스합니다. . 이 데이터 세트 속성은 HTML5 JavaScript API의 일부이며 선택한 모든 요소 데이터의 DOMStringMap<🎜을 반환하는 데 사용됩니다. 속성 >객체.
이 방법을 사용할 때는 data-uid와 같은 완전한 속성 이름을 사용하여 데이터에 액세스하는 대신 data- 접두사를 제거해야 합니다. 또 다른 특별 참고 사항은 다음과 같습니다. data- 속성 이름에 하이픈이 포함된 경우(예: data-date-of-birth) 하이픈이 제거되고 낙타 표기법으로 변환됩니다. 이전 속성 이름은 변환 후 dateOfBirth여야 합니다.
코드는 다음과 같습니다.<p id="user" data-id="1234567890" data-name="脚本之家" data-date-of-birth>码头</p> <script type="text/javascript"> var el = document.querySelector('#user'); console.log(el.id); // 'user' console.log(el.dataset);//一个DOMStringMap console.log(el.dataset.id); // '1234567890' console.log(el.dataset.name); // '脚本之家' console.log(el.dataset.dateOfBirth); // '' el.dataset.dateOfBirth = '1985-01-05'; // 设置data-date-of-birth的值. console.log('someDataAttr' in el.dataset);//false el.dataset.someDataAttr = 'mydata'; console.log('someDataAttr' in el.dataset);//true </script>
// 'data-flowering' 속성을 포함하는 모든 요소 선택
document .querySelectorAll ( '[data-flowering]' ) ;
//'data-text-colour' 속성 값이 red인 요소를 모두 선택
document .querySelectorAll ( '[data-text-color="red"]' ) ;
마찬가지로 다음 예와 같이 data- 속성 값을 통해 해당 요소에 대한 CSS 스타일을 설정할 수도 있습니다.
<style type ="text/css"> .user { width : 256px ; height : 200px ; } .user[data-name='feiwen'] { color : brown } .user[data-name='css'] { color : red } </style> <p class = "user" data-id = "123" data-name = "feiwen" > 1 </p> <p class = "user" data-id = "124" data-name = "css" > 码头 </p>
H5 28의 매우 중요한 새로운 기능, 새로운 기술 및 신기술에 대한 자세한 설명
4. 5. 🎜>H5 여러 이미지 업로드 완료의 상세 예시위 내용은 H5의 사용자 정의 속성 데이터에 대한 자세한 설명-*의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!