HTML全域性屬性data-
阿新 • • 發佈：2019-01-25
<!-- 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)這樣就可以獲取自定義的屬性 -->