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来实现更复杂的选择逻辑。