Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML에서 사용자 정의 속성을 사용하는 방법

HTML에서는 사용자 정의 속성을 만들 수 있습니다. 그런 다음 CSS를 사용하여 스타일을 지정하거나 JavaScript를 사용하여 해당 속성의 동작을 제어할 수 있습니다.

사용자 정의 속성을 원하는 대로 부를 수 있지만 사용자 정의 속성 이름 앞에는 data-가 와야 합니다. 레이블:

<tag data-custom-attribute-name="value">Content</tag>

예를 들어 "Apple"이라는 음식 요소가 있다고 가정해 보겠습니다. . 사용자가 클릭하면 유형이 무엇인지 표시하고 싶습니다. 음식의 팝업 대화 상자에 있습니다.

이를 위해 food-type이라는 사용자 정의 속성을 생성합니다. (data- 레이블)을 <div>에 추가합니다. Apple이 있는 요소 내부 텍스트:

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
  Apple
</div>

기능을 작동시키는 JavaScript:

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  alert(food.innerHTML + " is a " + foodType)
}

여기 데모가 있습니다.

HTML 코드 작동 방식:

  • 먼저 onclick을 추가했습니다. <div> 속성 요소. 이것은 클릭을 수신하는 이벤트 리스너를 연결하는 이벤트 속성입니다... 짐작하셨겠지만, 클릭!
  • 그런 다음 showDetailsBox(this)의 속성 값을 할당합니다. onclick으로 속성.
  • showDetailsBox() Apple 텍스트 요소를 클릭하는 즉시 호출되는 JavaScript 함수의 이름입니다.
  • this (this)의 일부 속한 객체를 참조하는 인수입니다(this 초심자에게는 다소 상급이므로 이해하지 못해도 괜찮습니다.)
  • id HTML 요소의 고유 ID를 지정하는 데 사용되는 내장 HTML 속성입니다. 이 경우 고유 ID는 apple입니다. .

자바스크립트 코드 작품은 이 HTML 튜토리얼의 범위를 벗어나므로 간단하게 설명하겠습니다.

showDetailsBox() 함수는 onclick에 의해 호출됩니다. 이벤트 속성, 코드 블록 { ... } 실행 내용:

function showDetailsBox(food) {
  ...
}

코드 블록 내부의 첫 번째 줄에서 JavaScript는 사용자 정의 data-food-type이 있는 HTML 요소를 선택합니다. 속성 및 해당 속성 값을 foodType이라는 변수에 할당합니다. :

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  ...
}

두 번째 줄에서 내장 alert()를 실행합니다. 메서드(팝업 대화 상자를 표시하고 foodType 값을 표시하도록 지시합니다. 물론 fruit입니다. :

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  alert(food.innerHTML + " is a " + foodType)
}

위의 전체 코드 예제를 완전히 이해하지 못하더라도 걱정하지 마십시오. 특히 초보자에게는 이해해야 할 내용이 많이 있습니다. 연습하면 이해가 될 것입니다!

HTML 속성에 대한 보다 광범위한 정보를 보려면 MDN 웹 문서 HTML 속성 참조를 살펴보는 것이 좋습니다.

중요: 보조 때문에 데이터 속성 내부에 표시되고 액세스할 수 있어야 하는 중요한 콘텐츠를 저장하지 마세요. 기술은 때때로 그것들에 접근하지 않습니다. 검색 크롤러는 할 수 있습니다. 또한 데이터 속성 값을 인덱싱하지 않습니다. 따라서 여기에 중요한 SEO 콘텐츠를 넣지 마세요.