我們如何在所有HTML元素上嵌入自訂資料屬性？-html教學-PHP中文網

首頁

web前端

html教學

我們如何在所有HTML元素上嵌入自訂資料屬性？

PHPz

Aug 28, 2023 pm 12:49 PM

html元素自訂資料屬性嵌入數據

我們如何在所有HTML元素上嵌入自訂資料屬性？

在本文中，我們需要在所有HTML元素上嵌入自訂資料屬性。我們可以使用HTML中的data-*屬性來實作。

在HTML中，data-* 屬性用於自訂僅對網頁或應用程式私有的資料。此屬性可為HTML元素新增自訂值。

HTML中的data-*屬性由兩部分組成−

屬性值可以是任意字串。
屬性名稱應只包含小寫字母，且在前綴"data-"之後必須至少有一個字元。

這些資料通常在JavaScript中用於改善使用者體驗。以下是在HTML元素上嵌入自訂資料屬性的範例。

範例1

在這個例子中，

我們已列出三個帶有自訂 data-id 和 data-price 資料的（服裝）
在這裡，資料屬性對使用者不可見。
雖然使用者看不到這些值，但這些值將存在於文件中。

<!DOCTYPE html>
<html>
<head>
   <title>How do we embed custom data attributes on all HTML elements? </title>
</head>
<body>
   <ul>
      <li data-id="1" data-price="INR 1899">Shirt</li>
      <li data-id="2" data-price="INR 2799">Pant</li>
      <li data-id="3" data-price="INR 4599">Jacket</li>
   </ul>
</body>
</html>

這些值沒有顯示出來，因為我們沒有提取我們指定的自訂屬性。

範例2

在這個例子中，

We’ve created four links with tags inside the HTML table.
每個元素都有一個自訂的data-plyr-type屬性，其中包含一個播放器名稱。
我們使用了 onClick 事件來提取自訂屬性。
每當我們點擊 <a></a> 元素時，JavaScript 函數會擷取並顯示播放器的國家名稱。

<!DOCTYPE html>
<html>
<head>
   <script>
      function showData(plyr) {
         var players = plyr.getAttribute("data-plyr-type");
         alert(plyr.innerHTML + " is a " + players + ".");
      }
   </script>
</head>
<body>
   <h1 id="Cricketers">Cricketers!</h1>
   <p>Click on a player to see which team he belongs to:</p>
   <table border=2 px;>
      <caption>Players</caption>
      <tr>
         <td onclick="showData(this)" id="owl" data-plyr-type="Afganistan player">Rashid khan</td>
         <td onclick="showData(this)" id="owl" data-plyr-type="Pakistan player">Babar azam</td>
      </tr>
      <tr>
         <td onclick="showData(this)" id="salmon" data-plyr-type="England player">Jos Buttler</td>
         <td onclick="showData(this)" id="salmon" data-plyr-type="Australia player">Steve smith</td>
      </tr>
      <tr>
         <td onclick="showData(this)" id="tarantula" data-plyr-type="India player">Jasprit bumrah</td>
         <td onclick="showData(this)" id="tarantula" data-plyr-type="West indies player">Jason holder</td>
      </tr>
   </table>
</body>
</html>

正如我們在輸出中所看到的，當使用者點擊任何一位板球運動員的表格資料時，將提取自訂屬性並顯示特定球員的國家名稱。

以上是我們如何在所有HTML元素上嵌入自訂資料屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

如何将HTML转换为MP4格式Feb 19, 2024 pm 02:48 PM

标题：HTML如何转换为MP4格式：详细代码示例在日常的网页制作过程中，我们常常会遇到将HTML页面或者特定的HTML元素转换为MP4视频的需求。例如将动画效果、幻灯片或其他动态元素保存为视频文件。本文将介绍如何使用HTML5和JavaScript将HTML转换为MP4格式，并提供具体的代码示例。HTML5的video标签和CanvasAPIHTML5引入

JS中appendChild与append区别Feb 20, 2024 pm 06:57 PM

JS中appendChild与append区别，需要具体代码示例在JavaScript中，当我们需要动态地向DOM（文档对象模型）中添加子元素时，我们通常使用appendChild和append这两个方法。虽然它们的目的都是为了向父元素中添加子元素，但在使用上却有一些区别。一、appendChild方法appendChild方法是DOM节点对象的方法之一，用

我们如何在所有HTML元素上嵌入自定义数据属性？Aug 28, 2023 pm 12:49 PM

在本文中，我们需要在所有HTML元素上嵌入自定义数据属性。我们可以使用HTML中的data-*属性来实现。在HTML中，data-*属性用于自定义仅对网页或应用程序私有的数据。该属性可为HTML元素添加自定义值。HTML中的data-*属性由两部分组成−属性值可以是任意字符串。属性名称应只包含小写字母，并且在前缀"data-"之后必须至少有一个字符。这些数据通常在JavaScript中用于改善用户体验。以下是在HTML元素上嵌入自定义数据属性的示例。示例1在这个例子中，我们已

JSP文件使用的技巧和注意事项Feb 01, 2024 am 09:15 AM

JSP文件的打开技巧与注意事项1.使用文本编辑器打开JSP文件JSP文件本质上是文本文件，因此可以使用任何文本编辑器来打开它们。一些流行的文本编辑器包括记事本、记事本++、SublimeText和Atom。2.在IDE中打开JSP文件如果你正在使用集成开发环境（IDE）来开发JSP应用程序，那么你也可以在IDE中打开JSP文件。一些流行的IDE包括Ec

HTML盒模型的概念及作用Feb 18, 2024 pm 09:49 PM

HTML盒模型是一种用于描述元素在网页中布局和定位的概念。它将每个HTML元素包装在一个矩形的盒子中，这个盒子由内容区域、内边距、边框和外边距组成。在编写网页时，了解盒模型对于控制元素的尺寸、位置和样式都非常重要。具体的盒模型示例可以通过以下代码进行演示：

HTML全局属性的实际运用场景：5个提升网页开发效率的技巧Feb 18, 2024 pm 05:35 PM

HTML全局属性的实际应用案例：提升网页开发效率的5个技巧HTML作为构建网页结构的标记语言，拥有许多全局属性，它们可以被应用在不同的元素上，用于实现不同的功能和效果。在网页开发过程中，合理地使用这些全局属性可以极大地提高开发效率。本文将为您介绍5个实际应用案例，并附上相应的代码示例。class属性的应用：批量修改样式class属性可以给HTML元素指定

CSS中相对单位和绝对单位有何异同？Feb 18, 2024 pm 10:07 PM

CSS（层叠样式表）是一种用于描述网页上元素样式的标记语言。在CSS中，有两种不同的长度单位，分别是相对单位和绝对单位。相对单位是相对于元素自身或其父元素的大小来计算的。常见的相对单位有：百分比（%）、em和rem。百分比单位是相对于父元素的大小来计算的。例如，如果父元素的宽度为400px，子元素的宽度设置为50%，那么子元素的实际宽度就是200px（400

理解HTML标签的全局属性Feb 18, 2024 pm 12:34 PM

HTML全局属性是指可以应用于HTML元素的通用属性，它们不仅仅适用于特定的HTML元素，而是适用于所有的HTML元素。全局属性为开发者提供了一种统一的方法来控制HTML的外观和行为，增加了HTML元素之间的一致性和可扩展性。其中一些常见的全局属性包括：class：用于为元素指定一个或多个CSS类名，从而可以通过CSS样式表来装饰元素的外观。id：用于为元素

See all articles