HTML5 사용자 정의 속성 데이터-* 자세한 소개 및 JS 작업 예제

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

예:

코드 복사

코드는 다음과 같습니다.

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

data-* 사용자 정의 속성의 값에 액세스하려면 속성 메소드를 사용하는 것이 매우 편리합니다.

코드 복사

코드는 다음과 같습니다.

// getAttribute를 사용하여 data- 속성을 가져옵니다
var 사용자 = 문서 . getElementById ( '사용자' ) ;
var userName = plant .getAttribute ( 'data-uname' ) ; // userName = '스크립트 홈'
var userId = plant .getAttribute ( 'data-uid' ) ; // userId = '12345'

// setAttribute를 사용하여 data- 속성을 설정합니다.
user .setAttribute ( 'data-site' , 'http://www.jb51.net' ) ;

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

코드 복사

코드는 다음과 같습니다.

/div>

// getAttribute를 사용하여 data- 속성을 가져옵니다
var 사용자 = 문서 . getElementById ( '사용자' ) ;
var userName = plant .getAttribute ( 'uname' ) ; // userName = '스크립트 홈'
var userId = plant .getAttribute ( 'uid' ) ; // userId = '12345'

// setAttribute를 사용하여 data- 속성을 설정합니다.
user .setAttribute ( '사이트' , 'http://www.jb51.net' ) ;

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

데이터세트 속성 액세스 데이터-*맞춤 속성값

이 방법은 요소의 데이터 세트 속성에 액세스하여 data-* 사용자 정의 속성의 값에 액세스합니다. 데이터 세트 속성은 HTML5 JavaScript API의 일부이며 선택한 모든 요소의 data- 속성과 함께 DOMStringMap 객체를 반환하는 데 사용됩니다.

이 방법을 사용할 때는 data-uid와 같은 완전한 속성 이름을 사용하여 데이터에 액세스하는 대신 data- 접두사를 제거해야 합니다.

또 한 가지 주의할 점은 data- 속성 이름에 하이픈이 포함된 경우(예: data-date-of-birth) 하이픈이 제거되고 이전 속성 이름이 이후에 카멜 표기법으로 변환된다는 것입니다. dateOfBirth여야 합니다.

코드 복사

코드는 다음과 같습니다.

Dock