HTML5 실습과 분석의 커스텀 데이터 속성을 이야기할 때면 밖에서 자바스크립트를 배우던 시절이 생각나는데, 그때는 마치 닭피를 흘리는 것 같았고 늘 설렜습니다. 그때도 맞춤 속성에 대해 들어본 적이 있었습니다. 사용자 정의 속성을 소개하겠습니다.

HTML5 실제 전투 및 분석: 데이터 속성을 사용자 정의하는 방법

사용자 정의 속성, 태그 부분에 일부 사용자 정의 속성을 추가할 수 있으므로 의도적으로 접두사를 가질 필요가 없습니다. 그러나 HTML5에 새로 추가된 사용자 정의 데이터 속성은 이전 사용자 정의 속성과 다릅니다. HTML5에서는 요소에 비표준 속성을 추가할 수 있지만 렌더링과 관련되지 않은 정보나 의미 정보를 요소에 제공하기 위해 data- 접두사를 추가해야 합니다. data-로 시작하는 속성을 태그에 추가하면 "-" 뒤의 이름은 원하는 대로 지정할 수 있습니다. 작은 예는 다음과 같습니다.

HTML 코드

<p id="meng" data-long="5211314" data-li="limenglong">梦龙小站</p>

HTML5 실제 전투 및 커스텀 데이터 속성(dataset) 획득 방법 분석

커스텀 데이터 속성을 추가한 후, 사용자 정의 속성 값에 액세스하는 요소입니다. 데이터 세트 속성의 값은 DOMStringMap의 인스턴스입니다. DOMStringMap은 이름-값 쌍의 매핑입니다. 이 매핑에서 data-name 형식의 각 속성에는 해당 속성이 있지만 속성 이름에는 data- 접두사가 없습니다. 예를 들어 사용자 정의 속성이 data-myname인 경우 매핑의 해당 속성은 내 이름입니다). 작은 예는 다음과 같습니다.

HTML 코드

<p id="meng" data-long="5211314" data-li="limenglong">梦龙小站</p

JavaScript 코드

window.onload = function(){
	var op = document.getElementById("meng");

	//获取自定义数据属性
	var oLong = op.dataset.long;
	var oLi = op.dataset.li;
	alert(oLi)
	//设置自定义数据属性
	op.dataset.long = 123456;
	op.dataset.li = "lml";

	//有没有"meng"值
	if(op.dataset.long){
		alert("long:" + op.dataset.long); //long:123456
	}
};

미리보기 효과

추가해야 할 경우 다른 처리를 위해 보이지 않는 데이터 요소에 추가하려면 사용자 정의 데이터 속성을 사용해야 합니다. 링크 또는 매시업을 추적할 때 사용자 정의 데이터 속성을 사용하면 클릭이 발생한 페이지 부분을 쉽게 알 수 있습니다. 데이터 세트 속성에서 지원되는 브라우저는 Firefox 6+ 및 Chrome입니다.

HTML5 실습 및 분석에서 사용자 정의 데이터 속성에 대한 소개를 마칩니다. HTML5의 사용자 정의 데이터 속성은 이전 사용자 정의 속성과 크게 다르지 않습니다. 주된 이유는 데이터 세트를 통해 획득하고 설정할 수 있다는 것입니다. 또한 이름을 지정하기 전에 접두사 "data-"를 추가하세요. HTML5의 실제 전투 및 분석에 대한 자세한 내용은 Menglong Station 관련 업데이트를 참고하시기 바랍니다.

위 내용은 HTML5 실제 전투 내용과 사용자 정의 데이터 속성(dataset) 분석 내용입니다. php.cn)!