JavaScript 요소의 데이터 속성에 어떻게 액세스합니까?

JavaScript에서 데이터 속성 가져오기

데이터 유형이나 데이터 포인트와 같은 데이터 속성이 있는 HTML 요소를 처리할 때 JavaScript의 값은 어려울 수 있습니다. JavaScript 코드에서 이러한 데이터 속성을 검색하는 방법을 살펴보겠습니다.

데이터세트를 사용하여 데이터 속성에 액세스

데이터세트 속성을 사용하면 이름이 다음과 같은 요소의 모든 데이터 속성에 액세스할 수 있습니다. "데이터-"로 시작하세요. 특정 데이터 속성의 값을 얻으려면 "data-" 접두사 없이 속성 이름을 사용하면 됩니다. 예를 들어 data-type 속성의 값을 얻으려면 this.dataset.type을 사용합니다.

사용 예

다음 HTML 요소를 고려하세요.

<code class="html"><span data-typeId="123" data-type="topic" data-points="-1" data-important="true" id="the-span"></span></code>

이 요소에서 이벤트가 발생하면 이벤트 핸들러 함수 내에서 해당 데이터 속성에 액세스할 수 있습니다.

<code class="javascript">document.getElementById("the-span").addEventListener("click", function() {
  var json = JSON.stringify({
    id: parseInt(this.dataset.typeid),
    subject: this.dataset.type,
    points: parseInt(this.dataset.points),
    user: "H. Pauwelyn"
  });
});</code>

Result

이제 json 변수에는 데이터 속성 값이 포함된 개체가 포함됩니다.

<code class="json">{"id": 123, "subject": "topic", "points": -1, "user": "H. Pauwelyn"}</code>

위 내용은 JavaScript 요소의 데이터 속성에 어떻게 액세스합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!