如何在HTML中将自定义数据存储为页面或应用程序的私有数据?

如何在html中将自定义数据存储为页面或应用程序的私有数据?

自定义属性是专门设计的属性,不包含在标准 HTML5 属性中。它们使我们能够通过添加自己的数据来自定义 HTML 标签。

自定义属性是以 data- 开头的任何属性。我们可以使用 data-* 属性在所有的 HTML 组件上嵌入自定义属性。

语法:HTML

在HTML中,data-*属性的语法相对简单。以data-开头的每个元素都是一个data-*属性。

   id = “sample”   data-index = 1   data-row = 23   data-column = 44

语法:使用 JavaScript 访问

使用 JavaScript 访问这些数据属性也相对简单。我们可以使用 getAttribute() 及其完整的 HTML 名称,可以使用 dataset 属性读取该名称。

立即学习“前端免费学习笔记(深入)”;

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);}

以下是示例…

Example

的中文翻译为:

示例

在下面的示例中,我们使用 JavaScript 读取属性的值。

   

Result

  • Siddarth
  • Arjun
  • Badri
  • Nanda
function showPosition(runner) { var position = runner.getAttribute("data-position"); alert("The " + runner.innerHTML + " is " + position + "."); }

输出

在执行上述脚本时,它将生成一个包含一些数据的名称列表的输出。

当您尝试点击任何一个名称时,该函数会获取数据并显示一个警告框,其中显示了我们使用的自定义数据。

以上就是如何在HTML中将自定义数据存储为页面或应用程序的私有数据?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1551939.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 22:10:34
下一篇 2025年12月21日 22:10:52

相关推荐

  • HTML DOM console.error() 方法

    html dom console.error() 方法用于将错误消息写入控制台。此方法非常适用于测试和调试。 语法 console.error() 方法的语法如下: console.error(console.error(message)) 在这里,message是一个JavaScript字符串或对…

    好文分享 2025年12月21日
    000
  • 我的页面背景中能有一个HTML画布元素吗?

    在本文中,我们将了解是否可以在我的页面背景中添加 HTML 画布元素。 您可以尝试向画布添加具有位置:固定(或绝对,如果适用)的 CSS 样式,以便其后面的任何材质都将位于其顶部。 为了更好地理解是否可以在我的页面背景中使用 HTML canvas 元素,让我们看看以下示例…&#8230…

    2025年12月21日
    000
  • 如何将HTML中的getImageData()错误“画布已被跨域数据污染”修复?

    crossOrigin属性允许从外部来源加载的图像在画布中使用,就像它们从当前来源加载一样。 在没有CORS批准的情况下使用图像会污染画布。一旦画布被污染,就无法从画布中取回数据。通过从跨域域加载画布,您正在污染画布。 您可以通过设置−来防止这种情况发生。 img.crossOrigin = “An…

    2025年12月21日
    000
  • 在HTML中,我们如何设置在视频下载时显示图像?

    在本文中,我们将了解如何设置在以 HTML 格式下载视频时显示的图像。 HTML poster 属性允许用户在单击播放按钮或下载视频时显示图像。否则,如果没有设置海报属性,将使用视频的第一帧作为海报图片。 语法 以下是 HTML 属性的语法。 让我们深入研究以下示例,您可以在其中了解有关 HTML …

    2025年12月21日
    000
  • 当HTML中的ID元素的开头保持相同而结尾不同时,将CSS样式应用于它

    可以使用带有“id=post”的 div 选择帖子。这将选择所有带有 id 且包含引号中的值的 div 元素。 我们可以使用 – div[id*=’post-‘] { … } or div[id^=’post-‘] { … }. div[id*=’post-&#821…

    好文分享 2025年12月21日
    000
  • 将文本包围起来,使用HTML使其闪烁

    使用 标签使文本闪烁。 HTML 标签用于封装文本以使其闪烁。 您可以尝试运行以下代码来实现 标签 –  注意 – 不要使用此元素,因为它已过时。 示例 HTML blink Tag This text will blink in Netscape Version 5.0 以…

    2025年12月21日
    000
  • 当文件准备好在HTML中开始播放时执行脚本吗?

    您可以对以下属性使用oncanplay属性 – 、、和 。 示例 Your browser does not support the video element. alert(“I am ready to begin.”); 以上就是当文件准备好在HTML中开始播放时执行脚本吗?的详细内…

    2025年12月21日
    000
  • 如何在鼠标悬停在图像上时显示字体?

    我们在本文中要执行的任务是如何在将鼠标悬停在图像上时显示字体。让我们深入研究本文并快速了解 HTML 中的悬停和鼠标悬停。 HTML 中的 onmouseover 事件在鼠标指针触摸某个元素时触发。当鼠标指针离开某个元素时,会发生一个名为 onmouseout 的事件。 当用户使用指点设备与元素交互…

    2025年12月21日 好文分享
    000
  • 如何根据世界协调时间返回指定日期的星期几?

    JavaScript的date对象的getUTCDay()方法根据世界协调时间返回指定日期的星期几。 getUTCDay()返回的值是一个整数,对应于星期几:0代表星期日,1代表星期一,2代表星期二,依此类推。 示例 您可以尝试运行以下代码来返回指定日期的星期几 − JavaScript getUT…

    2025年12月21日
    000
  • 掌握HTML5:约束验证

    HTML5 给我们带来了很多非常好的优势。除了统一错误模型、引入新语义标签或简化文档类型等常见问题之外,最大的改进之一是表单的约束验证。如果没有表单,网络会是什么样子? 约束验证试图提高 Web 表单的可用性。浏览器可以直接告知用户无效值的可能性,而不是将表单发送到服务器,然后将其评估为无效,返回到…

    2025年12月21日 好文分享
    000
  • 使用HTML5文件上传与AJAX和jQuery

    当提交表单时,捕获提交过程并尝试运行以下代码片段来上传文件 – // File 1var myFile = document.getElementById(‘fileBox’).files[0];var reader = new FileReader();reader.readAsTex…

    2025年12月21日
    000
  • 我们如何在HTML5中为文档或部分创建页脚?

    使用HTML的 标签来显示文档或部分的页脚。您可以尝试运行以下代码来实现 标签 − 示例 HTML Footer Tag Simply Easy Learning You’re visiting tutorialspoint.com – tutorial hub for simply easy le…

    2025年12月21日
    000
  • JavaScript的位左移(

    <img src="https://img.php.cn/upload/article/000/000/164/169457983240702.jpg" alt="javascript的位左移(< 使用按位左移运算符,从右侧移动一个或多个零位。不考虑最左边的…

    好文分享 2025年12月21日
    000
  • 如何在HTML中将视频的音频输出设置为静音?

    使用静音属性将视频的音频输出设置为静音。您可以尝试运行以下代码来实现静音属性 – 示例 Your browser does not support the video element. 以上就是如何在HTML中将视频的音频输出设置为静音?的详细内容,更多请关注创想鸟其它相关文章!

    2025年12月21日
    000
  • 如何在HTML中添加背景音乐?

    HTML 标签用于在背景中播放音乐。此标签仅适用于Internet Explorer。 示例 您可以尝试运行以下代码来在HTML中添加背景音乐 − HTML bgsound Tag Plays sound file in the background. HTML 标签还支持以下属性 − 立即学习“前…

    2025年12月21日
    000
  • JavaScript位或(|)运算符是什么?

    如果其中一位为 1,则使用按位或 (|) 运算符时返回 1。 示例 您可以尝试运行以下代码来学习如何使用 JavaScript 按位或运算符。 document.write(“Bitwise OR Operator”); // 7 = 00000000000000000000000000000111…

    2025年12月21日
    000
  • JavaScript中的fill()方法有什么用途?

    JavaScript 中的 fill() 方法用于用静态值填充数组中的元素。以下是 fill() 的参数 – value- 要填充的值。 begin− 开始填充数组的起始索引。end− 停止填充数组的结束索引。 示例 您可以尝试运行以下代码来了解如何在 JavaScript 上使用 fi…

    2025年12月21日
    000
  • 如何更改br标签的高度?

    标签是一种常用的 HTML 元素,用于在 Web 内容中添加换行符。然而,有时,行不连续性的预先存在的高度可能被认为是不够的,因此需要增大书面材料的连续行之间的间隙。在本次讨论中,我们将探索修改 标签高度的各种方法,包括使用 CSS line-height 属性和添加辅助换行元素。无论您是初级还是熟…

    2025年12月21日
    000
  • 使用HTML和CSS在悬停时抖动按钮

    在本教程中,我们将学习使用 HTML 和 CSS 在用户悬停时摇动按钮。创建摇动按钮可以使应用程序的用户体验更具吸引力。 我们需要使用 CSS“关键帧”规则创建自定义动画来摇动任何 HTML 元素。之后,我们可以使用自定义关键帧作为“animation”CSS属性的值,以便当用户将鼠标悬停在按钮上时…

    2025年12月21日
    000
  • 如何在HTML中添加元素的高度?

    使用 HTML 中的 height 属性来设置元素的高度。您可以将该属性与以下元素一起使用 – 、、、、 等。 示例 您可以尝试运行以下代码来在 HTML 中实现 height 属性 – Your browser does not support the video elem…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信