H5의 사용자 정의 속성 데이터에 대한 자세한 설명-*-H5 튜토리얼-php.cn

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

Y2J

풀어 주다： 2017-05-24 11:41:23

원래의

2735명이 탐색했습니다.

HTML5에는 data-* 사용자 정의 속성인 사용자 정의 데이터 속성이라는 새로운 기능이 추가되었습니다. HTML5에서는 data-를 접두어로 사용하여 일부 데이터를 저장하는 데 필요한 사용자 정의 속성을 설정할 수 있습니다.

물론 고급 브라우저는 스크립트를 통해 데이터를 정의하고 액세스할 수 있습니다. 프로젝트 실습에 매우 유용합니다.

예:

코드는 다음과 같습니다.

속성 메서드를 사용하여 데이터-* 사용자 정의 속성 값에 액세스

data-* 사용자 정의 속성의 값에 접근하기 위해 속성 메소드를 사용하는 것은 매우 편리합니다:

코드는 다음과 같습니다:

 // 使用getAttribute获取 data- 属性

  var user = 
document
 . getElementById ( &#39;user&#39; ) ;

  var userName = plant . getAttribute ( &#39;data-uname&#39; ) ; // userName = &#39;脚本之家&#39;

  var userId = plant . getAttribute ( &#39;data-uid&#39; ) ; // userId = &#39;12345&#39;

  // 使用
set
Attribute设置 data- 属性

  user . setAttribute ( &#39;data-site&#39; , &#39;http://www.jb51.net&#39; ) ;

로그인 후 복사

이 방법은 모든 최신 브라우저에서 정상적으로 작동할 수 있지만 HTML 5의 사용자 정의 data-* 속성의 목적은 아닙니다. 그렇지 않으면 이전에 사용한 사용자 정의 속성과 다르지 않습니다. 예를 들면 다음과 같습니다.

코드 다음과 같습니다:

 <p id = "user" uid = "12345" uname = "脚本之家" > </p>

  <script>

  // 使用getAttribute获取 data- 属性

  var user = document . getElementById ( &#39;user&#39; ) ;

  var userName = plant . getAttribute ( &#39;uname&#39; ) ; // userName = &#39;脚本之家&#39;

  var userId = plant . getAttribute ( &#39;uid&#39; ) ; // userId = &#39;12345&#39;

  // 使用setAttribute设置 data- 属性

  user . setAttribute ( &#39;site&#39; , &#39;http://www.jb51.net&#39; ) ;

  </script>

로그인 후 복사

이 "원래" 사용자 정의 속성은 위의 data-* 사용자 정의 속성과 다르지 않지만 지식 속성 이름은 다릅니다.

data세트 속성은 data-* 사용자 정의 속성의 값에 액세스합니다.

이 메소드는 요소 값의 데이터 세트 속성에 액세스하여 data-* 사용자 정의 속성에 액세스합니다. . 이 데이터 세트 속성은 HTML5 JavaScript API의 일부이며 선택한 모든 요소 데이터의 DOMString Map<🎜을 반환하는 데 사용됩니다. 속성 >객체.

이 방법을 사용할 때는 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(&#39;#user&#39;);
  console.log(el.id); // &#39;user&#39;
  console.log(el.dataset);//一个DOMStringMap
  console.log(el.dataset.id); // &#39;1234567890&#39;
  console.log(el.dataset.name); // &#39;脚本之家&#39;
  console.log(el.dataset.dateOfBirth); // &#39;&#39;
  el.dataset.dateOfBirth = &#39;1985-01-05&#39;; // 设置data-date-of-birth的值.
  console.log(&#39;someDataAttr&#39; in el.dataset);//false
  el.dataset.someDataAttr = &#39;mydata&#39;;
  console.log(&#39;someDataAttr&#39; in el.dataset);//true
  </script>

로그인 후 복사

데이터 속성을 삭제하려면 다음을 수행하세요. delete el .dataset ; .

멋져보이네요 ㅎㅎ 하지만 안타깝게도 새 데이터 세트 속성은 Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+ 브라우저에서만 구현되므로 이 기간 동안 작동하려면 getAttribute 및 setAttribute를 사용하는 것이 가장 좋습니다.

데이터에 대하여-속성 선택기

실제 개발 시 유용할 수 있으며, 이를 기반으로 데이터를 맞춤 설정할 수 있습니다. - 속성 선택 관련 요소 . 예를 들어 querySelector

All을 사용하여 요소를 선택합니다.

코드는 다음과 같습니다.

// '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=&#39;feiwen&#39;] {

  color : brown

  }

  .user[data-name=&#39;css&#39;] {

  color : red

  }

  </style>

  <p 
class
 = "user" data-id = "123" data-name = "feiwen" > 1 </p>

  <p class = "user" data-id = "124" data-name = "css" > 码头 </p>

로그인 후 복사

[ 관련 추천]

Html5 무료 동영상 튜토리얼

H5의 이벤트 속성에 대한 자세한 설명

H5 28의 매우 중요한 새로운 기능, 새로운 기술 및 신기술에 대한 자세한 설명

H5 타이머 코드 데모 만들기

5. 🎜>H5 여러 이미지 업로드 완료의 상세 예시

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