<!-- 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 οnclick="showDetails(this)" id="owl"
data-animal-type="bird">Owl</li>
<li οnclick="showDetails(this)" id="salmon"
data-animal-type="fish">Salmon</li>
<li οnclick="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 οnclick="showDetails(this)" id="owl"
data-animal-type="bird">Owl</li>
<li οnclick="showDetails(this)" id="salmon"
data-animal-type="fish">Salmon</li>
<li οnclick="showDetails(this)" id="tarantula"
data-animal-type="spider">Taratula</li>
</ul>
</body>
</html>
<!-- 在这个程序中主要是介绍一个属性data-*用于存储界面自定义的属性
属性是有两个部分组成的:
该属性的不要包含大写字母，在data后面必须至少是含有一个字符
该属性是可以为任意的字符串
自定义的数据可以让用户有更好的数据体验，在这个地方我们要记住一个函数就是获取标签属性是getAttribute(attribute)这样就可以获取自定义的属性 -->
1034
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
