HTML5 사용자 정의 데이터 속성을 사용하는 방법 및 이유

HTML5 사용자 정의 데이터 속성을 사용하면 개발자가 HTML 요소에 사용자 정의 데이터를 저장할 수 있습니다. JavaScript 또는 CSS에서 사용할 수있는 HTML 요소에 추가 정보를 추가하여 웹 페이지 기능을 향상시키는 방법을 제공합니다. 이 기사에서는 데이터 속성이 무엇인지, 무엇이 무엇인지 설명합니다.

키 포인트

HTML5 사용자 정의 데이터 속성을 통해 개발자는 JavaScript 또는 CSS에서 액세스하고 사용할 수있는 HTML 요소에 대한 추가 정보를 저장하여 웹 페이지 기능을 향상시킬 수 있습니다. 데이터 속성은 항상 "data-"로 시작하며 속성 선택기를 통해 CSS의 요소를 스타일링하는 데 사용할 수 있으며 함수를 통해 사용자에게 정보를 표시 할 수 있습니다. JavaScript에서 는 및 메소드, 속성 또는 jQuery의 메소드를 사용하여 데이터 속성에 액세스 할 수 있습니다.

사용자 정의 데이터 속성은 강력하지만 다른 적절한 HTML 요소 또는 속성이없고 많은 양의 데이터를 저장하는 데 사용해서는 안되는 경우에만 사용해야합니다.
• 사용자 정의 데이터 속성을 사용하는 이유는 무엇입니까? attr() 우리는 종종 다른 DOM 요소와 관련된 정보를 저장해야합니다. 이 정보는 독자에게는 중요하지 않을 수 있지만, 쉽게 액세스 할 수있게되면 개발 노력이 훨씬 쉬워집니다. 예를 들어, 웹 페이지에 다른 레스토랑을 나열한다고 가정 해 봅시다. HTML5 이전에 식당에서 제공하는 음식 유형 또는 방문자가 얼마나 멀리 있는지와 같은 정보를 저장하려면
속성을 ​​HTML의 속성을 사용하게됩니다. 사용자가 방문하고자하는 특정 식당을보기 위해 식당 ID를 저장 해야하는 경우 어떻게해야합니까? 다음은 html
• 속성을 ​​기반으로하는 방법에 대한 몇 가지 질문입니다. getAttribute() html setAttribute() 속성은 그러한 데이터를 저장하는 데 사용되지 않습니다. 주요 목적은 개발자가 스타일 정보를 일련의 요소에 할당 할 수 있도록하는 것입니다. dataset 메시지를 추가 할 때마다 새로운 클래스가 요소에 추가해야합니다. 이로 인해 JavaScript의 구문 분석 데이터가 필요한 정보를 더욱 어렵게 만듭니다. data() 주어진 클래스 이름이 숫자로 시작한다고 가정합니다. 클래스 이름의 데이터를 기반으로 나중에 요소를 스타일링하기로 결정한 경우 숫자를 피하거나 스타일 시트에서 속성 선택기를 사용해야합니다.
• 이러한 문제를 해결하기 위해 HTML5는 사용자 정의 데이터 속성을 소개합니다. 이름이
로 시작하는 모든 요소 속성은 데이터 속성입니다. 이러한 데이터 속성을 스타일 요소에 사용할 수도 있습니다. 다음으로 데이터 속성의 기본 사항을 파고 CSS 및 JavaScript에서 값에 액세스하는 방법을 배우겠습니다.

html 구문 앞에서 언급했듯이, 데이터 속성의 이름은 항상 로 시작됩니다. 예는 다음과 같습니다.

<li data-type="veg" data-distance="2miles" data-identifier="10318">Salad King</li>

이제이 데이터 속성을 사용하여 방문자 레스토랑을 검색하고 정렬 할 수 있습니다. 예를 들어, 이제 특정 거리 내에 모든 채식 식당을 보여줄 수 있습니다. 접두사 외에도 유효한 사용자 정의 데이터 속성의 이름은 문자, 숫자, 하이픈 (-), 도트 (.), 콜론 (:) 또는 밑줄 만 포함 할 수 있습니다 (_). 대문자를 포함 할 수 없습니다. 데이터 속성을 사용하는 경우 두 가지에주의를 기울여야합니다. 먼저, 이러한 속성에 저장된 데이터는 문자열 유형이어야합니다. 문자열로 인코딩 할 수있는 모든 컨텐츠는 데이터 속성에 저장할 수도 있습니다. 모든 유형 변환은 JavaScript로 수행해야합니다. 둘째, 데이터 속성은 다른 적절한 HTML 요소 또는 속성이없는 경우에만 사용해야합니다. 예를 들어,

속성에 요소의 클래스를 저장하는 것은 부적절합니다. 요소는 원하는 값뿐만 아니라 여러 데이터 속성을 가질 수 있습니다. data- data-class 데이터 속성 및 CSS 데이터 속성을 사용하여 속성 선택기를 CSS의 스타일 요소에 사용할 수 있습니다. 함수를 사용하여 데이터 속성에 저장된 정보를 사용자에게 (툴팁 또는 기타 방법으로) 표시 할 수도 있습니다.

그런 다음 pseudo element를 사용하여 사용자에게 데이터를 제시 할 수 있습니다. attr()

JavaScript를 사용하여 데이터 속성에 액세스하십시오

JavaScript에서 데이터 속성에 액세스하는 세 가지 방법이 있습니다.

li[data-type='veg'] {
  background: #8BC34A;
}

li[data-type='french'] {
  background: #3F51B5;
}

사용 및

javaScript에서

및 data-tooltip를 사용하여 다른 데이터 속성의 값을 얻고 설정할 수 있습니다. 주어진 속성이 존재하지 않으면

메소드는 또는 빈 문자열을 반환합니다. 다음은 이러한 방법을 사용하는 방법의 예입니다.

<span data-tooltip="简单的解释">Word</span>

메소드를 사용하여 기존 속성의 값을 수정하거나 새 속성을 추가 할 수 있습니다. ::before

span::before {
  content: attr(data-tooltip);
  //更多样式规则
}

span:hover::before {
  display: inline-block;
}

사용

속성 데이터 속성에 액세스하는 더 간단한 방법은 속성을 ​​사용하는 것입니다. 이 속성은 각 사용자 정의 데이터 속성에 대한 항목이 포함 된 a 객체를 반환합니다. 속성을 ​​사용할 때 알아야 할 몇 가지 사항이 있습니다. 사용자 정의 데이터 속성을

키로 변환하는 데 세 단계가 필요합니다.

• 속성 이름 data-에서 접두사를 제거하십시오 이름에서 소문자 뒤에 소문자를 제거하고 다음 문자를 대문자로 변환하십시오. 다른 문자는 동일하게 유지됩니다. 이것은 하이픈과 소문자가 이어진 모든 하이픈도 동일하게 유지됨을 의미합니다.
• 그런 다음 객체에 저장된 낙타 이름을 사용하여 와 같은 키로 저장된 속성에 액세스 할 수 있습니다. 속성에 액세스하는 또 다른 방법은 와 같은 사각형 브래킷 표기법을 사용하는 것입니다. 다음 html을 고려하십시오 :
다음은 몇 가지 예입니다
• 이 방법은 이제 모든 주요 브라우저에서 지원되며 먼저 사용하여 사용자 정의 데이터 속성에 액세스해야합니다.
jQuery의 메소드를 사용하여 요소의 데이터 속성에도 액세스 할 수 있습니다. jQuery 버전 1.6 이전에는 다음 코드를 사용하여 데이터 속성에 액세스해야합니다. element.dataset.keyname 버전 1.6에서 시작하여 JQuery는 카멜 버전의 데이터 속성을 사용하기 시작합니다. 이제 다음 코드로 동일한 작업을 수행 할 수 있습니다. element.dataset[keyname] jQuery는 또한 데이터 속성에서 얻은 문자열을 내부적으로 데이터 속성에서 숫자, 부울, 객체, 배열 및 와 같은 적절한 유형으로 변환하려고 시도한다는 것을 알아야합니다.

<li data-type="veg" data-distance="2miles" data-identifier="10318">Salad King</li>

jQuery가 데이터 속성에서 얻은 값을 다른 유형으로 변환하지 않고 문자열로 얻은 값을 얻으려면 jQuery의

메소드를 사용해야합니다. JQuery는 데이터 속성에 처음 액세스 할 때만 해당 값을 검색합니다. 그런 다음 더 이상 데이터 속성에 액세스하거나 변경하지 않습니다. 이 속성에 대한 모든 변경 사항은 내부적으로 이루어지며 jQuery에서만 액세스 할 수 있습니다. 다음 목록 항목의 데이터 속성에서 작동한다고 가정합니다.

당신은 다음 코드를 사용하여

li[data-type='veg'] {
  background: #8BC34A;
}

li[data-type='french'] {
  background: #3F51B5;
}

속성의 값을 변경할 수 있습니다.

보시다시피, 기본 JavaScript (비 Jafery)를 사용하여

속성의 값에 액세스하면 여전히 이전 결과가 제공됩니다.

결론

이 튜토리얼에서는 HTML5 데이터 속성에 대한 모든 중요한 사항을 다루었습니다. 속성 선택기를 사용하여 툴팁 및 스타일링 요소를 작성하는 것 외에도 데이터 속성을 사용하여 읽지 않은 메시지에 대한 알림 등과 같은 사용자에게 다른 데이터를 저장하고 표시 할 수도 있습니다. data()

(FAQ 섹션은 여기에 추가되어야합니다. 컨텐츠는 입력 텍스트의 FAQ 부분과 일치하지만 언어 표현식이 더 세련 될 수 있습니다. 복제를 피하기 위해이 부분을 생략합니다.)

<span data-tooltip="简单的解释">Word</span>

.

위 내용은 HTML5 사용자 정의 데이터 속성을 사용하는 방법 및 이유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!