html5自訂屬性什麼用-前端問答-PHP中文網

html5自訂屬性什麼用

青灯夜游

發布： 2022-08-01 17:02:43

原創

1945 人瀏覽過

html5自訂屬性「data-*」用於儲存私有頁面後應用的自訂數據，而自訂的數據可以讓頁面擁有更好的互動體驗（不需要使用Ajax或去服務端查詢資料），語法「」；「data-*」屬性由兩部分組成：1、屬性名不要包含大寫字母，在「data -」後必須至少有一個字元；2、屬性值，該值可以是任何字串。

html5自訂屬性什麼用

本教學操作環境：windows7系統、HTML5版、Dell G3電腦。

html5自訂屬性<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(&#39;myDiv&#39;).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 = &#39;value4&#39;;

登入後複製

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速度稍微慢些，雖然使用dataset不能提高程式碼的效能，但是對於簡潔程式碼，提高程式碼的可讀性和可維護性是很有幫助的。

【推薦課程：HTML5影片教學、web前端】

以上是html5自訂屬性什麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！