HTML5 사용자 정의 속성 데이터-* 자세한 소개 및 JS 작업 예제_html5 튜토리얼 기술

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

예:

코드 복사

코드는 다음과 같습니다.

속성 메서드를 사용하여 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

데이터 속성을 삭제하려면 el .dataset 를 삭제하세요.

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

데이터 속성 선택기 정보

실제 개발에서는 맞춤 데이터 속성을 기반으로 관련 요소를 선택하는 것이 유용할 수 있습니다. 예를 들어 querySelectorAll을 사용하여 요소를 선택합니다.

코드 복사

코드는 다음과 같습니다.

// 'data-flowering' 속성을 포함하는 모든 요소 선택
document .querySelectorAll ( '[data-flowering]' ) ;

// 'data-text-colour' 속성 값이 red인 요소를 모두 선택합니다
document .querySelectorAll ( '[data-text-color="red"]' ) ;

마찬가지로 다음 예와 같이 data- 속성 값을 통해 해당 요소에 대한 CSS 스타일을 설정할 수도 있습니다.

코드 복사

코드는 다음과 같습니다.

.user {
너비 : 256px ;
높이 : 200px ;
}

.user[data-name='feiwen'] {
색상: 브라운
}

.user[data-name='css'] {
색상 : 레드
}
스타일>

1

도크