Html 5中支持用戶自定義的data-*特性，它們在UI是不可見的。例如data-length,它可以附加在input的標簽上。更加具體信息可參考W3C Html 5 data-說明書
有這么一段描述:
Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
接下來我們就可以實現這樣一個簡單例子:
<!DOCTYPE html> <html> <head> <title>Html5 custom data attribute Test</title> </head> <body > <li class="user" data-name="Peter Liu" data-city="ShangHai" data-lang="CSharp" data-food="apple"> <b>Peter says:</b> <span>Hello, how are you?</span> </li> <script type="text/javascript"> var user = document.getElementsByTagName("li")[0]; var pos = 0, span = user.getElementsByTagName("span")[0]; var phrases = [ { name: "city", prefix: "I am from " }, { name: "food", prefix: "I like to eat " }, { name: "lang", prefix: "I like to program in " } ]; user.addEventListener("click", function () { var phrase = phrases[pos++]; // Use the .dataset property span.innerHTML = phrase.prefix + user.dataset[phrase.name]; }, false); </script> </body> </html>
上面的li標簽中嵌入一些data-*特性，當你點擊那個span，讀取了每個data-*的value, 最后實現一個切換文字效果。你有注意到上面js中有用到一個dataset屬性。W3C官方也是有關於dataset的介紹。上面的代碼測試通過在 Firefox 11.0, Chrome 18.0.1025.151
注意這個在IE9是不支持的。 IE9 需要改寫為getAttribute
<!DOCTYPE html> <html> <head> <title>Html5 custom data attribute Test</title> </head> <body > <li class="user" data-name="Peter Liu" data-city="ShangHai" data-lang="CSharp" data-food="apple"> <b>Peter says:</b> <span>Hello, how are you?</span> </li> <script type="text/javascript"> var user = document.getElementsByTagName("li")[0]; var pos = 0, span = user.getElementsByTagName("span")[0]; var phrases = [ { name: "city", prefix: "I am from " }, { name: "food", prefix: "I like to eat " }, { name: "lang", prefix: "I like to program in " } ]; user.addEventListener("click", function () { var phrase = phrases[pos++]; // Use the .dataset property span.innerHTML = phrase.prefix + user.getAttribute('data-'+phrase.name); }, false); </script> </body> </html>
上面的代碼在IE 9.0.8112測試通過。您也可以在IE, FF中單步調試js看其中結果
希望對您Web開發有幫助。
您可能感興趣的文章:
作者：Petter Liu
出處：http://www.cnblogs.com/wintersun/
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。
該文章也同時發布在我的獨立博客中-Petter Liu Blog。