如何在 HTML 中儲存特定於頁面或應用程式的自定義資料？

自定義屬性是專門設計且未包含在標準 HTML5 屬性中的屬性。它們使我們能夠透過新增自己的資料來自定義 HTML 標籤。

自定義屬性是任何名稱以 data- 開頭的屬性。我們可以使用 data-* 屬性在所有 HTML 元件上嵌入自定義屬性。

語法：HTML

HTML 中 data-* 屬性的語法相對簡單。每個以 data- 開頭的元素都是一個 data-* 屬性。

<sample_data>
   id = “sample”
   data-index = 1
   data-row = 23
   data-column = 44
</sample_data>

語法：使用 JavaScript 訪問

使用 JavaScript 訪問這些 data- 屬性也相對簡單。我們可以使用 getAttribute() 以及可以使用 dataset 屬性讀取的完整 HTML 名稱。

const article = document.querySelector('#sample');
sample_data.dataset.index;
sample_data.dataset.row;
sample_data.dataset.column;

語法：使用 CSS 訪問

使用 CSS 藉助 attr() 訪問資料。

sample_data::before {
   content: attr(data-index);
}

以下是示例…

示例

在以下示例中，我們使用 javascript 讀取屬性的值。

<!DOCTYPE html>
<html>
<body>
   <h1>Result</h1>
   <ul>
      <li onclick="showPosition(this)"
         id="Siddarth" data-position="winner">
         Siddarth
      </li>
      <li onclick="showPosition(this)"
         id="Arjun" data-position="runner up">
         Arjun
      </li>
      <li onclick="showPosition(this)"
         id="Badri" data-position="third">
         Badri
      </li>
      <li onclick="showPosition(this)"
         id="Nanda" data-position="lost">
         Nanda
      </li>
   </ul>
   <script>
      function showPosition(runner) {
         var position = runner.getAttribute("data-position");
         alert("The " + runner.innerHTML + " is " + position + ".");
      }
   </script>
</body>
</html>

輸出

執行上述指令碼後，它將生成一個包含提供的一些資料的名稱列表的輸出。

當您嘗試點選其中任何一個名稱時，該函式獲取資料並顯示一個警報，顯示我們使用的自定義資料。

更新於： 2022-09-05

277 次檢視

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告