HTML - data-* 屬性

HTML data-* 屬性是一個全域性屬性，用於形成一類屬性，這些屬性定義我們自己的自定義資料屬性，並在頁面或應用程式上私下儲存自定義資料。

以下是此資料屬性的組成部分

屬性名稱：它包含一個字元，不包含大寫字母，並且以“data-*”為字首。
屬性值：可以是任何字串。

語法

<element data-* = "10784"> ...content </element >

這裡的“*”可以是任何內容，如下面的示例所示。

應用於

大多數 HTML 元素都支援 data-* 屬性，但也有一些例外。通常不用於包含內容或沒有任何內在功能（在其中自定義資料屬性適用）的元素可能不支援它們。例如 <style>、<html>、<title>、<script>、<meta> 等幾個標籤不支援自定義資料屬性。

HTML data-* 屬性的示例

下面的示例將說明 HTML data-* 屬性，以及我們應該在哪裡以及如何使用此屬性！

使用 dat-* 屬性定義自定義資料

在下面的示例中，我們將建立一個專案列表，並在每個專案上定義 data-course-type。

<!DOCTYPE html>
<html>

<head>
   <title>HTML data-* Attribute</title>
</head>

<body>
   <ul>
     <li data-course-type="frontEnd">HTML</li>
     <li data-course-type="backEnd">Php</li>
     <li data-course-type="fullStack">MERN</li>
   </ul>
</body>

<html>

懸停時顯示自定義資料

在下面的示例中，我們正在建立一個 HTML 文件並使用 data-* 屬性嵌入自定義資料，如下所示：

<!DOCTYPE html>
<html>

<head>
   <style>
      h1 {
         margin: 0;
      }
   
      ul {
         margin: 10px 0 0;
      }
   
      li {
         position: relative;
         width: 200px;
         padding-bottom: 10px;
      }
   
      li:after {
         content: 'Data ID: 'attr(data-id);
         position: absolute;
         top: -22px;
         left: 10px;
         background: black;
         color: white;
         padding: 2px;
         border: 1px solid #eee;
         opacity: 0;
         transition: 0.5s opacity;
      }
   
      li:hover:after {
         opacity: 1;
      }
   </style>
</head>

<body>
   <h1>Secret agents</h1>
   <ul>
      <li data-id="10784">
      Jason Walters, 003: Found dead in "A View to a Kill".
      </li>
      <li data-id="97865">
      Alex Trevelyan, 006: Agent turned terrorist leader.
      </li>
      <li data-id="45732">
      James Bond, 007: The main man; shaken but not stirred.
      </li>
   </ul>
</body>

</html>

在 JavaScript 中使用自定義資料

讓我們來看另一個示例，我們將使用 data-* 屬性嵌入自定義資料。這裡的 data-org-type 將儲存當前 li 元素中組織的型別。

<!DOCTYPE html>
<html>

<head>
   <title>data-* attribute</title>
</head>

<body>
   <h1>Organizations</h1>
   <p>Click on a organization to see what type it is:</p>
   <ul>
      <li onclick="showDetails(this)" 
         id="tutorialspoint" 
         data-org-type="EdTech organization">
            Tutorialspoint
         </li>
      <li onclick="showDetails(this)" 
         id="amazon" 
         data-org-type="E-commerce organization">
            Amazon
         </li>
      <li onclick="showDetails(this)" 
         id="google" 
         data-org-type="It & Product Based organization">
            Google
         </li>
      <p id="type"></p>
   </ul>
   <script>
      function showDetails(org) {
         let orgType = org.getAttribute("data-org-type");
         document.getElementById("type").innerHTML = 
         ("The " + org.innerHTML + " is a " + orgType + ".");
      }
   </script>
</body>

</html>

支援的瀏覽器

屬性
data-*	是 4.0	是 5.5	是 2.0	是 3.1	是 9.6

html_attributes_reference.htm

列印頁面