HTML中自定义属性并通过JS获取属性值

embedded/2024/10/22 12:32:10/

是的,HTML可以自定义属性。自定义属性的语法是使用 data- 前缀,后面跟上自定义的属性名。例如:

html"><div id="example" data-custom="myValue">Hello World</div>

在这个例子中,data-custom 就是自定义属性,属性值为 myValue

要通过 JavaScript 获取这个自定义属性的值,有几种方法:

方法 1: 使用 getAttribute 方法

你可以使用 getAttribute 方法来获取自定义属性的值:

javascript">const element = document.getElementById('example');
const customValue = element.getAttribute('data-custom');
console.log(customValue); // 输出 "myValue"

方法 2: 使用 dataset 属性

dataset 是一个更简洁的方式,它返回一个对象,其中包含了所有以 data- 开头的自定义属性。你可以直接通过属性名来访问:

javascript">const element = document.getElementById('example');
const customValue = element.dataset.custom;
console.log(customValue); // 输出 "myValue"

使用 dataset 时,属性名会自动从 data- 后面的部分转换为驼峰命名法。如果自定义属性名为 data-custom-value,可以这样访问:

javascript">const customValue = element.dataset.customValue;

这两种方法都可以有效获取自定义属性的值,选择哪种取决于对代码的可读性和简洁性的要求。


http://www.ppmy.cn/embedded/104067.html

相关文章

计算机毕业设计选题推荐-救援物资管理系统-Java/Python项目实战

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…

【专题】2024全球电商消费电子市场研究报告合集PDF分享(附原数据表)

原文链接&#xff1a;https://tecdat.cn/?p37552 在如今数字经济蓬勃发展的大环境下&#xff0c;电商行业正以前所未有的迅猛之势&#xff0c;对全球商业版图进行着深刻的重塑。据 Stocklytics 发布的有关全球电商市场价值及未来增长趋势的专项调查报告显示&#xff0c;2024…

【GIT】Idea中的git命令使用-全网最新详细(包括现象含义)

原文网址&#xff1a;【GIT】Idea中的git命令使用-全网最新详细&#xff08;包括现象含义&#xff09; 文章目录 **命令1&#xff1a;查看当前所处分支&#xff1a;****命令2&#xff1a;拉取最新代码&#xff1a;****命令3&#xff1a;切换分支&#xff1a;****命令4&#xff…

数据流的交响乐:SQL在复杂事件处理中的精妙运用

标题&#xff1a;数据流的交响乐&#xff1a;SQL在复杂事件处理中的精妙运用 在当今的数据驱动世界中&#xff0c;复杂事件处理&#xff08;Complex Event Processing&#xff0c;简称CEP&#xff09;已成为实时数据分析的关键技术。SQL&#xff0c;作为一种强大的查询语言&am…

【Python】如何使用pip,安装第三方库和qrcode、xlrd库的使用

第三方库 第三方库就是别人已经实现好了的库&#xff0c;我们可以拿过来直接使用 虽然标准库已经很强大了&#xff0c;但是终究是有限的&#xff0c;而第三方库可以视为是集合了全世界 Python 程序猿的智慧&#xff0c;可以说是几乎无穷无尽 使用 pip pip 是 Python 内置的包…

原生开发柱状图

一、先看效果 原生柱状图 二、实现步骤 1、引入chart.js库&#xff1a; <script src"jscss/chart.js"></script> 如果没有在网上找到chart.js&#xff0c;可以用我文末的。 2、在html页面中加入&#xff1a; <canvas id"myChart">&…

巧用 HTML 列表:<ul>、<ol>、<dl>的实用指南

目录 无序列表 容器级标签 有序列表 定义列表 一个dt配很多dd 每一个dl里面只有一个dt和dd 一个dl配多个dt 多级列表 无序列表 <ul>标签用于定义无序列表。无序列表的特点是各个列表项之间没有特定的顺序&#xff0c;通常以小圆点作为先导符号。所有主流浏览器…

一文了解肖特基二极管、稳压二极管和TVS管

一、二极管分类 我们最常见的二极管一般都是发光二极管&#xff0c;他们最大的一个特性是单项导通性&#xff0c;如果焊接反了它不会亮。但有时我们正是要利用它反向不导通来保护电路其他元件。 正向导通&#xff1a; 发光二极管、肖特基二极管 反向截止&#xff1a;稳压二极…