HTML全局属性data-
2015-08-15 11:50
597 查看
<!-- data-*属性是用用来嵌入自定义的数据 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
function showDetails(animal)
{
var animalType=animal.getAttribute("data-animal-type");
alert("The"+animal.innerHTML+"is a"+animalType+".")
}
</script>
<title></title>
</head>
<body>
<h1>物种</h1>
<p>点击一个物种，看看他属于什么类型</p>
<ul>
<li onclick="showDetails(this)" id="owl"
data-animal-type="bird">Owl</li>
<li onclick="showDetails(this)" id="salmon"
data-animal-type="fish">Salmon</li>
<li onclick="showDetails(this)" id="tarantula"
data-animal-type="spider">Taratula</li>
</ul>
</body>
</html>
<!-- 在这个程序中主要是介绍一个属性data-*用于存储界面自定义的属性
属性是有两个部分组成的:
该属性的不要包含大写字母，在data后面必须至少是含有一个字符
该属性是可以为任意的字符串
自定义的数据可以让用户有更好的数据体验，在这个地方我们要记住一个函数就是获取标签属性是getAttribute(attribute)这样就可以获取自定义的属性 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
function showDetails(animal)
{
var animalType=animal.getAttribute("data-animal-type");
alert("The"+animal.innerHTML+"is a"+animalType+".")
}
</script>
<title></title>
</head>
<body>
<h1>物种</h1>
<p>点击一个物种，看看他属于什么类型</p>
<ul>
<li onclick="showDetails(this)" id="owl"
data-animal-type="bird">Owl</li>
<li onclick="showDetails(this)" id="salmon"
data-animal-type="fish">Salmon</li>
<li onclick="showDetails(this)" id="tarantula"
data-animal-type="spider">Taratula</li>
</ul>
</body>
</html>
<!-- 在这个程序中主要是介绍一个属性data-*用于存储界面自定义的属性
属性是有两个部分组成的:
该属性的不要包含大写字母，在data后面必须至少是含有一个字符
该属性是可以为任意的字符串
自定义的数据可以让用户有更好的数据体验，在这个地方我们要记住一个函数就是获取标签属性是getAttribute(attribute)这样就可以获取自定义的属性 -->
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 