모든 HTML 요소에 사용자 정의 데이터 속성을 어떻게 삽입할 수 있나요?

이 문서에서는 모든 HTML 요소에 사용자 정의 데이터 속성을 포함해야 합니다. 이를 달성하기 위해 HTML에서 data-* 속성을 사용할 수 있습니다.

HTML에서 data-* 속성은 웹 페이지나 애플리케이션에만 비공개인 데이터를 사용자 정의하는 데 사용됩니다. 이 속성은 HTML 요소에 사용자 정의 값을 추가합니다.

HTML의 data-* 속성은 두 부분으로 구성됩니다. −

• 속성 값은 임의의 문자열일 수 있습니다.

• 속성 이름에는 소문자만 포함되어야 하며 접두사 "data-" 뒤에 문자가 하나 이상 있어야 합니다.

이 데이터는 사용자 경험을 개선하기 위해 JavaScript에서 자주 사용됩니다. 다음은 HTML 요소에 사용자 정의 데이터 속성을 삽입하는 예입니다.

예 1

이 예에서는

• 맞춤형 data-id 및 data-price 데이터를 사용하여 세 가지(의류)

를 나열했습니다.

• 여기서 데이터 속성은 사용자에게 표시되지 않습니다.

• 값은 사용자에게 표시되지 않지만 문서에는 표시됩니다.

으아악

이 값은 우리가 지정한 사용자 정의 속성을 추출하지 않았기 때문에 표시되지 않습니다.

예 2

이 예에서는

• HTML 테이블 내부에 태그가 포함된 4개의 링크를 만들었습니다.

• 각 요소에는 플레이어 이름이 포함된 맞춤 data-plyr-type 속성이 있습니다.

• onClick 이벤트를 사용하여 사용자 정의 속성을 추출했습니다.

• <a></a> 요소를 클릭할 때마다 JavaScript 함수가 플레이어의 국가 이름을 추출하여 표시합니다.

으아악

출력에서 볼 수 있듯이 사용자가 크리켓 선수의 테이블 데이터를 클릭하면 사용자 정의 속성이 추출되고 특정 선수의 국가 이름이 표시됩니다.

위 내용은 모든 HTML 요소에 사용자 정의 데이터 속성을 어떻게 삽입할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!