」;「data-*」屬性由兩個部分組成:1、屬性名不要包含大寫字母,在「data-」後面必須至少有一個字符;2、屬性值,該值可以是任何字串。"/> 」;「data-*」屬性由兩個部分組成:1、屬性名不要包含大寫字母,在「data-」後面必須至少有一個字符;2、屬性值,該值可以是任何字串。">
html5自訂屬性「data-*」用於儲存私有頁面後應用的自訂數據,而自訂的數據可以讓頁面擁有更好的互動體驗(不需要使用Ajax或去服務端查詢資料),語法「a89c796c160e049635e0a82088362eb1」;「data-*」屬性由兩部分組成:1、屬性名不要包含大寫字母,在「data -」後必須至少有一個字元;2、屬性值,該值可以是任何字串。
本教學操作環境: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-”為前綴定義我們的自訂屬性就可以用來進行一些資料的存放。
43d5f872dac78da2f00d1b2554e67c92在标签里设置H5新增的自定义属性16b28748ea4df4d9c2150843fecfba68
這個data屬性還可以應用在CSS中,前提是你的瀏覽器支援after偽類,以及content的attr屬性(低版本的IE不支援):
737b187744250f324eeb34e9a767a074data属性应用于CSS中16b28748ea4df4d9c2150843fecfba68
#myDiv{ position: ralative; } #myDiv:hover:after{ position: absolute; top: 0px; left: 0px; content: attr(data-attribute); color: red; }
如何取得data屬性的值?
43d5f872dac78da2f00d1b2554e67c92在标签里设置H5新增的自定义属性16b28748ea4df4d9c2150843fecfba68
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元素定義了多個自訂屬性,如何獲取?
89d9a64ee0d1f224431c05a17eee736b在标签里设置多个自定义属性16b28748ea4df4d9c2150843fecfba68
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) == 'data-') { 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
速度稍微慢些,雖然使用dataset
不能提高程式碼的效能,但是對於簡潔程式碼,提高程式碼的可讀性和可維護性是很有幫助的。
以上是html5自訂屬性什麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!