html5 사용자 정의 속성의 용도는 무엇입니까?

html5 사용자 정의 속성 "data-*"는 개인 페이지 뒤에 적용된 사용자 정의 데이터를 저장하는 데 사용되며 사용자 정의 데이터는 페이지에 더 나은 대화형 경험을 제공할 수 있습니다(Ajax를 사용하거나 서버에서 데이터를 쿼리할 필요 없음), 구문 "< ;element data-*="속성 값 지정(문자열)">"; "data-*" 속성은 두 부분으로 구성됩니다. 1. 속성 이름은 대문자를 포함할 수 없으며 "data-" 뒤에 와야 합니다. 2. 임의의 문자열일 수 있는 속성 값.

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

html5개의 사용자 정의 속성<code><span style="font-size: 18px;">data-*</span>

data-* 属性用于存储私有页面后应用的自定义数据，是 HTML5 新增的属性。

<element data-*="somevalue">

• somevalue：指定属性值 (一个字符串)

data-* 属性可以在所有的 HTML 元素中嵌入数据。

自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。

data-* 属性由以下两部分组成：

• 属性名不要包含大写字母，在 data- 后必须至少有一个字符。

• 属性值，该属性值可以是任何字符串

注意： 自定义属性前缀 "data-" 会被客户端忽略。

利用dataset可以获取data-属性构造的对象，该方法目前只能在Chrome 、Opera等部分浏览器中实现，其他浏览器如需获取其属性值需要使用getAttribute和setAttribute来操作。

只要在标签里面以”data-”为前缀定义我们的自定义属性就可以用来进行一些数据的存放。

<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>

这个data属性还可以应用在CSS中，前提是你的浏览器支持after伪类，以及content的attr属性（低版本的IE不支持）：

<div id="myDiv" data-attribute="属性值">data属性应用于CSS中</div>

#myDiv{
  position: ralative;
}
 
#myDiv:hover:after{
  position: absolute;
  top: 0px;
  left: 0px;
  content: attr(data-attribute);
  color: red;
}

如何获取data属性的值？

<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>

1、使用getAttribute来获取

var myDiv = document.getElementById("myDiv");
var theValue = myDiv.getAttribute("user-defined-attribute");

2、使用Html5自定义属性对象Dataset来获取

var myDiv = document.getElementById("myDiv");
 
var theValue = myDiv.dataset.attribute;

注意：带连字符连接的名称在使用的时候需要命名驼峰化，即大小写组合书写，这与应用元素的style对象类似，dom.style.borderColor。例如data属性为data-other-attribute，则我们要获取相应的值可以使用：myp.dataset.otherAttribute

如果Html元素定义了多个自定义属性，如何获取？

<div id="myDiv" data-attribute1="value" data-attribute2="value2" data-attribute3="value3">在标签里设置多个自定义属性</div>

1、使用循环遍历

 var myDiv = document.getElementById("myDiv");
var attrs = myDiv.attributes,
var expense = {}, i, j;  
for (i = 0, j = attrs.length; i < j; i++) {
  if(attrs[i].name.substring(0, 5) == &#39;data-&#39;) {
    expense[attrs[i].name.substring(5)] = attrs[i].value;
  }
}

2、使用dataset属性

var expense = document.getElementById('myDiv').dataset;

注：dataset并不是典型意义上的JavaScript对象，而是个DOMStringMap对象，DOMStringMap是HTML5一种新的含有多个名-值对的交互变量

1）、让所有的自定义的属性值塞到一个数组中

var chartInput = [];
 
for (var item in expense) {
  chartInput.push(expense[item]);
}

2）、删掉一个data属性

delete myDiv.dataset.attribute;

3、增加一个data属性

myDiv.dataset.attribute4 = 'value4';

dataset的兼容性处理

如果浏览器不支持dataset，有必要做一下兼容处理：

if(myDiv.dataset) {
  myDiv.dataset.attribute = "valueXX"; // 设置自定义属性
  var theValue = myDiv.dataset.attribute; // 获取自定义属性
} else {
  myDiv.setAttribute("data-attribute", "valueXX"); // 设置自定义属性
  var theValue = myDiv.getAttribute("data-attribute"); // 获取自定义属性
}

结语：

使用dataset操作data 要比使用getAttribute速度稍微慢些，虽然使用datasetdata-*

data-* 속성은 비공개 페이지 뒤에 적용되는 사용자 정의 데이터를 저장하는 데 사용됩니다. HTML5의 새로운 속성. rrreee

• somevalue: 속성 값 지정(문자열)

data-* 속성은 모든 HTML 요소에 데이터를 포함할 수 있습니다. 🎜🎜사용자 정의된 데이터는 페이지에 더 나은 대화형 경험을 제공할 수 있습니다(Ajax를 사용하거나 서버에서 데이터를 쿼리할 필요 없음). 🎜🎜data-* 속성은 다음 두 부분으로 구성됩니다. 🎜

• 🎜속성 이름에는 대문자가 포함될 수 없습니다. 데이터 이후 - 문자가 하나 이상 있어야 합니다. 🎜
• 🎜모든 문자열이 가능한 속성 값 🎜

🎜참고: 사용자 정의 속성 접두사 "data-"는 클라이언트에서 무시됩니다. 🎜🎜데이터세트를 사용하여 데이터 속성으로 구성된 개체를 얻을 수 있습니다. 이 방법은 현재 Chrome 및 Opera와 같은 일부 브라우저에서만 구현됩니다. 다른 브라우저에서 속성 값을 가져와야 하는 경우 getAttribute 및 setAttribute를 사용해야 합니다. . 🎜🎜태그의 접두사로 "data-"를 사용하여 사용자 정의 속성을 정의하는 한 이를 사용하여 일부 데이터를 저장할 수 있습니다. 🎜rrreee🎜이 데이터 속성은 브라우저가 컨텐츠의 after pseudo-class 및 attr 속성을 지원하는 경우 CSS에도 적용할 수 있습니다(IE의 하위 버전은 이를 지원하지 않음): 🎜rrreeerrreee🎜🎜값을 얻는 방법 데이터 속성? 🎜rrreee🎜1. getAttribute를 사용하여 🎜rrreee🎜를 가져옵니다. 2. Html5 사용자 정의 속성 개체 데이터 세트를 사용하여 🎜rrreee🎜를 가져옵니다. 참고: 하이픈이 있는 이름은 대문자와 소문자를 조합하여 사용해야 합니다. 이는 적용된 요소의 스타일 객체인 dom.style.borderColor와 유사합니다. 예를 들어 데이터 속성은 data-other-attribute입니다. 해당 값을 얻으려면 다음을 사용할 수 있습니다. myp.dataset.otherAttribute🎜🎜🎜Html 요소가 여러 사용자 정의 속성을 정의하는 경우 어떻게 얻나요? 🎜rrreee🎜1. 루프 탐색을 사용하세요🎜rrreee🎜2. dataset 속성을 ​​사용하세요🎜rrreee🎜참고: dataset는 일반적인 의미의 JavaScript 개체가 아닙니다. 그러나 이는 DOMStringMap 객체입니다. DOMStringMap은 여러 이름-값 쌍을 포함하는 HTML5의 새로운 대화형 변수🎜🎜1)로, 모든 사용자 정의 속성 값을 배열🎜rrreee🎜2)에서 데이터 속성🎜rrreee🎜3을 삭제합니다. 브라우저가 지원하지 않는 경우 데이터 속성🎜rrreee🎜🎜데이터 세트 호환성 처리🎜🎜를 추가합니다. 데이터세트이므로 일부 호환성 처리가 필요합니다. 🎜rrreee🎜🎜결론: 🎜🎜 데이터 세트를 사용하여 데이터 를 작동하는 것이 를 사용하는 것보다 낫습니다. getAttribute 속도가 약간 느려집니다. dataset를 사용하면 코드 성능이 향상될 수 없지만 코드를 간결하게 하고 코드의 가독성과 유지 관리성을 향상시키는 데 매우 도움이 됩니다. 🎜🎜【추천 과정: 🎜HTML5 비디오 튜토리얼🎜, 🎜웹 프론트엔드🎜】🎜

위 내용은 html5 사용자 정의 속성의 용도는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!