Wulin.com의 기사 소개 (www.vevb.com) : HTML5에서 사용자 정의 속성 구현은 기술적으로 복잡하지 않습니다. 실질적인 어려움은 사용하는 방법이 프로젝트에 적합한 지 여부입니다. 적용 가능한 경우 더 효과적으로 만드는 방법은 무엇입니까? 데이터 세트 메소드를 페이지 함수로 활성화하기에는 너무 이르지만 결국 많은 브라우저 가이 기능을 지원하지 않습니다.
HTML5 개발이 본격적으로 진행되고 있으며 HTML5에서 사용자 정의 속성을 사용하면 개발자들 사이에서 점차 인기가 높아지고 있습니다. 또한 웹 개발의 의미에서 중요한 역할을합니다. 이 기사에서는 실제 예를 통해 JavaScript 기능을 포함한 HTML5 사용자 정의 데이터 속성의 생성 및 액세스를 살펴 봅니다.
HTML5를 사용하기 전에 먼저 HTML 요소에 사용자 정의 속성을 추가하고 JavaScript를 통해 액세스하십시오. 전에 시도한 경우 태그 확인을 쉽게 무시할 수 있으며 HTML5는 유효한 웹 페이지 내에서 자신의 요소 속성을 작성하고 사용하는 기능을 제공 할 수 있습니다.
html5 파일 생성 :
어떤 것을 사용할 것인지 알아 내지 않았다면 다음 코드를 복사 할 수 있습니다.
<! doctype html>
<html>
<헤드>
<cript>
/*여기서 기능*/
< /스크립트>
< /head>
<body>
< /body>
< /html>
신체에 사용자 정의 요소를 설정하고 헤드 스크립트 영역의 일부에서 JavaScript 요소를 사용하여 액세스하십시오.
요소 만들기 :
먼저, JavaScript 예제를 인식 할 수 있도록 간단한 컨텐츠 및 사용자 정의 속성 및 ID와 같은 요소를 추가하십시오.
<div id = product1 Data-product-category = 의류>
면 셔츠
</div>
보시다시피, 사용자 정의 속성은 다음과 같은 형태입니다. data-*, 데이터 섹션 또는 선택한 이름에서 이름을 설정하십시오. HTML5에서 사용자 정의 속성을 사용하는 것이이를 수행하는 유일한 방법입니다. 따라서 웹 페이지가 유효한지 확인하려면이 메소드를 사용할 수 있습니다.
물론 프로젝트 세부 사항 부분은 사용자 정의 속성이 귀하에게 유용한 지 여부와 이름을 지정하는 방법을 결정합니다. 이 예는 다양한 제품 범주의 소매 웹 사이트에 적용 할 수 있습니다.
사용자 정의 속성을 사용하면 애니메이션 디스플레이 기능과 같은 요소를 설정하는 특별한 방법으로 페이지 내에서 JavaScript 코드를 사용할 수 있습니다. 표준 HTML 요소가없는 경우 사용자 정의 속성을 사용하는 것이 좋습니다.
테스트 버튼을 추가하십시오
이벤트는 다음 코드가 페이지에 추가 된 경우 페이지의 자체 자바 스크립트 요소를 사용하여 실행할 수 있습니다.
<입력 유형 = 버튼 값 = 속성 get elppection onclick = getElementAttribute ( 'product1')/>
속성 가져 오기 :
JavaScript에서 속성에 액세스하는 가장 일반적인 방법은 GetAttributes를 사용하는 것입니다. 이는 또한 우리가해야 할 첫 번째 단계이기도합니다. 페이지의 헤드 스크립트 영역에 다음 함수를 추가하십시오.
함수 getElementAttribute (elemid) {
var relement = document.getElementById (elemid);
var theattribute = thelement.getAttribute ( 'data-product-category');
경고 (Theattribute);
}
여기서 우리는 예제에 경고 값을 추가했으며 물론 자신의 요구에 따라 스크립트에 추가 할 수도 있습니다.
데이터 가져 오기 :
DOM getAttributes 대신 요소 데이터 세트를 사용할 수 있습니다. 특히 일부 경우 여러 속성을 통해 코드가 반복되는 경우 더 효율적일 수 있지만 브라우저의 데이터 세트에 대한 지원은 여전히 매우 낮 으므로이 코드를 염두에두면 // 뒤에있는 방법과 동일한 프로세스를 실행할 수 있습니다.
// var theattribute = thelement.getAttribute ( 'data-product-category'); var theattribute = thelement.dataset.productcategory;
데이터 제거- 데이터 세트에서 속성 이름으로 시작하여 HTML에 여전히 포함되어 있습니다.
사용자 정의 속성 이름에 하이픈이있는 경우 데이터를 통해 액세스 할 때 Camel-Case 양식을 사용합니다 (즉, 데이터 제품 범주는 ProductCategory가됩니다).
다른 모듈 및 기능
우리는이 속성을 얻었으며 스크립트를 여전히 설정하고 삭제할 수 있습니다. 다음 코드는 표준 JavaScript 모듈 및 데이터 세트를 사용하여 속성을 설정하는 방법을 보여줍니다.
DOM 메소드 또는 데이터 세트를 사용하여 특정 속성을 삭제할 수도 있습니다.
// dom 메소드
thelement.removeattribute ( 'data-product-category');
// 데이터 세트 버전
thelement.dataset.productcategory = null;
결론:
HTML5에서 사용자 정의 속성을 구현하는 것은 기술적으로 복잡하지 않습니다. 실질적인 어려움은 사용하는 방법이 프로젝트에 적합한 지 여부입니다. 그렇다면 어떻게 더 효과적으로 만들 수 있습니까? 데이터 세트 메소드를 페이지 함수로 활성화하기에는 너무 이르지만 결국 많은 브라우저 가이 기능을 지원하지 않습니다.