如何使用HTML5中的data-*属性

　　data-*属性的含义

　　data-*属性用于存储页面或应用程序的私有自定义数据是所有HTML元素上自定义data属性，它存储的数据能够被JavaScript所利用，可以创建更好的用户体验。

　　data-*属性包含两个部分分别为：

　　属性名：在属性名中不能包含任何大写字母，而且在前缀“data-”之后必须有一个字符，不能为空。

　　属性值：属性值可以是任何字符串。

　　<elementdata-*="somevalue">

　　例

　　data-animal-type="动物类"

　　如何使用data-*属性

　　由于自定义数据属性是有效的HTML5，因此可以在支持HTML5文档类型的任何浏览器中使用它们：

　　我们可以设置存储在JavaScript动画中可能需要的元素的初始高度或不透明度，也可设置通过JavaScript加载的Flash影片的参数以及存储自定义网络分析标记数据等等。

　　例：

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　<title>Document</title>

　　<style>

　　ul{

　　list-style:none;

　　}

　　li{

　　width:50px;

　　height:50px;

　　background-color:pink;

　　text-align:center;

　　margin-left:10px;

　　line-height:50px;

　　float:left;

　　}

　　</style>

　　</head>

　　<body>

　　functionshowDetails(animal){

　　varanimalType=animal.getAttribute("data-animal-type");

　　console.log(animal.innerHTML+"是一种"+animalType+"。");

　　}

　　</script>

　　<p>点击li时显示其类别</p>

　　<ul>

　　<lionclick="showDetails(this)"id="owl"data-animal-type="动物类">小猫咪</li>

　　<lionclick="showDetails(this)"id="salmon"data-animal-type="水果类">苹果</li>

　　</ul>

　　</body>

　　</html>

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h54327.shtml