当前位置: 首页 > article >正文

HTML元素拓展:data-*属性的应用与实践

data-*属性的应用与实践

  • 1、定义
  • 2、用法举例
  • 2、应用场景


1、定义

  • data-* 属性用于存储页面或应用程序的私有自定义数据,它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力,并可以通过脚本在 HTML 与 DOM 表现之间进行专有数据的交换。

  • 如,百度官方页面中:
    在这里插入图片描述

  • 存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。

  • data-* 属性由两部分组成:

    • 属性名:不应该包含任何大写字母,并且在前缀 “data-” 之后必须有至少一个字符
    • 属性值:可以是任意字符串
      • 注意:用户代理会完全忽略前缀为 “data-” 的自定义属性。

2、用法举例

举例:

使用 data-* 属性

<div id="example" data-my-custom-attribute="some value">Hello World</div>

访问 data-* 属性

  • 在JavaScript中,可以通过元素的dataset属性来访问data-*属性的值。dataset属性返回一个类似对象的Map,其中的键名是data-*属性去除data-前缀后的部分,所有连字符会被转换成驼峰式命名法(camelCase)。
var element = document.getElementById('example');

console.log(element.dataset.myCustomAttribute); // 输出: "some value"
  • data-*命名也可以使用驼峰格式,但需要注意访问方式:

使用 data-* 属性

<div id="example1" data-my-custom-attribute="some value1">Hello World</div>
<!-- 驼峰写法 -->
<div id="example2" data-myCustomAttribute="some value2">Hello World</div>

访问 data-* 属性

var element = document.getElementById('example1');
console.log(element.dataset.myCustomAttribute); // 输出: "some value1"

// 驼峰写法,大写的字母需要转换为小写才能获取到,否则就是undefined
var element = document.getElementById('example2');
console.log(element.dataset.mycustomattribute); // 输出: "some value2"

2、应用场景

data-* 属性可用于多种场景:

  • 存储额外的元数据:例如,存储某个元素的状态或与之关联的额外信息。
<article data-author="John Doe" data-published="2023-01-01">
    <h1>Article Title</h1>
    <p>Article content...</p>
</article>

<script>
	const article = document.querySelector('article');
	console.log(article.dataset.author); // 输出: "John Doe"
	console.log(article.dataset.published); // 输出: "2023-01-01"
</script>
  • 触发特定行为:结合JavaScript,可以根据data-*属性的值来执行某些功能。
<button data-action="show-modal">Click me</button>
<div id="modal" style="display:none;">This is a modal.</div>

<script>
	document.querySelector('button').addEventListener('click', function() {
	    const action = this.dataset.action;
	    if (action === 'show-modal') {
	        document.querySelector('#modal').style.display = 'block';
	    }
	});
</script>
  • 模板引擎:在服务器端渲染或客户端模板引擎中,data-*属性可以用来填充动态内容。
<template>
  <div>
    <button :data-message="message">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    };
  }
};
</script>
  • CSS选择器:也可以通过:has([data-*])伪类(在支持的浏览器中)在CSS中选择具有特定data-*属性的元素。

在这里插入图片描述

<p data-highlight>This paragraph will have a yellow background.</p>
<p>This paragraph will not.</p>
/* 选择所有具有 data-highlight 属性的元素 */
[data-highlight] {
    background-color: yellow;
}

在这里插入图片描述

<p data-highlight>This paragraph will have a yellow background.</p>
<p data-highligh='true'>This paragraph will not.</p>
/* 选择所有具有 data-highlight 属性的元素 */
[data-highlight] {
    background-color: yellow;
}
/* 选择所有 data-highligh='true' 的元素 */
[data-highligh='true'] {
     background-color: red;
}

请注意,第四种用途中使用的CSS选择器[data-highlight]在现代浏览器中是被支持的,但并不是所有浏览器都支持更复杂的data-*属性选择器,例如[data-highlight=“true”]。在使用更复杂的data-*选择器时,建议检查浏览器兼容性或使用JavaScript来实现更复杂的选择逻辑。


http://www.kler.cn/a/292452.html

相关文章:

  • 学习threejs,使用TWEEN插件实现动画
  • Queuing 表(buffer表)的优化实践 | OceanBase 性能优化实践
  • Wordpress常用配置,包括看板娘跨域等
  • 低代码牵手 AI 接口:开启智能化开发新征程
  • 统信UOS开发接口DTK
  • Oracle ADB 导入 BANK_GRAPH 的学习数据
  • 国产芯片LT6911UXE/C:HDMI 2.0转MIPI DSI/CSI转换器,4K超清
  • 【数据结构-二维前缀和】【列维护优化】力扣3212. 统计 X 和 Y 频数相等的子矩阵数量
  • EmguCV学习笔记 VB.Net 9.2 VideoWriter类
  • 谷歌seo网址如何快速被收录?
  • 大模型笔记01--基于ollama和open-webui快速部署chatgpt
  • 13.5 Files类操作梳理(下)
  • docker 启动ElasticSearch
  • uniapp组件知识记录
  • 数据赋能(192)——开发:数据服务——影响因素、直接作用、主要特征
  • 详解 MQ 消息队列
  • el-table使用#header自定义表头后脱离响应式问题处理
  • docker国内镜像源报错解决方案
  • docker 介绍以及常用命令
  • Meta关闭Spark AR平台:未来规划与影响分析
  • 2-81 基于matlab的SAR图像的相干斑抑制
  • 【微信小程序】自定义 tabBar
  • 服务器禁用远程(22)
  • flutter Timer报错
  • IMU助力JAXA空间站机器人
  • 【Linux】gcc/g++ 、make/Makefile、git、gdb 的使用