HTML5自定義屬性

自定義屬性的出現並非始於html5，但html5將 data-* 真正合法化。data自定義屬性如何操作？有何用途？。

首先給定一段html**：

this is a div elem!

this is a div elem,too!

1. 自定義屬性用來儲存或運算元據，可讀可寫，但不會在頁面顯示；

2. 屬性值可以是普通的字串(「string」)，也可以以json格式或陣列來儲存;

$("body").data("foo", 52);  

$("body").data("bar", ); 
$("body").data();

div[data-color="red"]  

div[data-color="yellow"]

2. 通過jquery定義的 data() 方法操作：

data()方法出現在1.4.3 version後，意在dom元素上繫結任意型別的資料,避免了迴圈引用的記憶體洩漏風險。我們可以在乙個元素上設定不同的值，之後獲取這些值，其讀寫操作與attr()或prop()操作屬性相似：

$("#div1").data("color"); //read  

$("#div1").data("color","orange") //reset 
$("#div2").data("music",) //new 
$("#div2").data("music");
$("#div1").data("music").drink //read,love

1. 通過data()設定的自定義屬性並不會在控制台中可見。

2. 儘管"data-"

是html5才出現的屬性，但jquery是通用的，所以，在非html5的頁面或瀏覽器裡，你仍然可以使用.data(obj)方法來操作"data-*" 資料。

3. 通過原生js操作：

原生js中 dataset 用來儲存data屬性值，同 arguments

不是陣列類似，dataset

也不是典型意義上的js物件，而是個domstringmap物件，domstringmap是html5一種新的含有多個名-值對的互動變數。如下：

var oelem = document.getelementbyid('div1');  

oelem.dataset.color //read 
oelem.dataset.color = "blue" //reset 
oelem.dataset.book = "1984" //new

eval("("+oelem.dataset.music+")").drink  //water

HTML5自定義屬性

你可以去讀一下html5的詳細規範，但這個自定義data屬性的用法非常的簡單，就是你可以往html標籤上新增任意以 data 開頭的屬性，這些屬性頁面上是不顯示的，它不會影響到你的頁面布局和風格，但它卻是可讀可寫的。下面的乙個 片段是乙個有效的html5標記 some awesome data 可是...

HTML5自定義data屬性

可能大家在使用jquery mobile時，經常會看到data role data theme等的使用，比如 通過如下 即可實現頁首的效果 通過手機瀏覽，效果如下 為什麼寫乙個data role header 就能實現底部為黑色 文字居中顯示的效果呢？我們寫乙個html頁面，自定義乙個data ch...

HTML5 自定義屬性 dataset

dataset 屬性的 值是 domstringmap 的乙個例項，也就是乙個名值對兒的對映。在這個對映中，每個 data name 形式 的屬性都會有乙個對應的屬性，只不過屬性名沒有 data 字首 本例中使用的方法僅用於演示 var div document.getelementbyid myd...