html data- 自定义属性的使用

最新推荐文章于 2025-03-05 16:37:53 发布

ili_ii

最新推荐文章于 2025-03-05 16:37:53 发布

阅读量1.6k

点赞数 23

文章标签： html vue.js 前端

本文链接：https://blog.csdn.net/ili_ii/article/details/142929689

版权

data- 属性（通常称为 data attributes）提供了一种简单而有效的方式来存储页面或应用程序的私有自定义数据。

好处是什么？

存储额外信息： data- 属性允许你在 HTML 元素上存储额外的信息，而不需要使用 cookies 或 JavaScript 对象。
语义化标签：通过在元素上添加 data- 属性，可以为元素提供更多的上下文信息，使 HTML 更加语义化。
无需脚本的可访问性： data- 属性在页面加载时即可被浏览器读取，这意味着即使 JavaScript 被禁用，这些信息也是可访问的。
样式化和脚本化：可以使用 CSS 选择器和 JavaScript 轻松地访问和操作这些属性，以实现动态样式和行为。
减少全局命名空间的污染：使用 data- 属性可以避免在全局命名空间中创建变量，从而减少潜在的命名冲突。
提高可维护性： data- 属性提供了一种集中存储与特定元素相关的数据的方法，这使得代码更易于维护和理解。
支持 HTML5： data- 属性是 HTML5 的一部分，现代浏览器都支持它们，这使得你的网页更加符合标准。
跨框架兼容： data- 属性可以在不同的 JavaScript 框架和库之间共享数据，而不需要框架之间的特定接口。
简化 DOM 操作：通过直接在元素上存储数据，可以减少对 DOM 的查询和操作，从而提高性能。
便于调试：开发者工具通常允许你直接查看和编辑 data- 属性，这使得调试过程更加直观和方便。
微数据和 SEO： data- 属性可以用于微数据（microdata），帮助搜索引擎更好地理解页面内容，从而可能提高搜索引擎优化（SEO）的效果。

使用指南

添加前缀：为了避免与现有的和未来的 HTML 属性冲突，建议给你的 data- 属性添加一个前缀，通常是项目名称或组件名称的缩写。
```
<div data-myapp-sort-order="ascending"></div>
```
使用连字符分隔的驼峰式命名：属性名应该使用连字符分隔的驼峰式命名（也称为 kebab-case），以提高可读性。
```
<div data-sort-order="ascending"></div>
```
确保语义化：选择描述性强的 data- 属性名，以便清晰地表达它们存储的数据。
```
<div data-user-id="123"></div>
```
避免存储敏感信息：不要在 data- 属性中存储敏感或私密信息，因为它们可以通过开发者工具轻松访问。
使用小写字母：属性值通常使用小写字母，避免使用大写字母或混合大小写，以保持一致性。
```
<div data-is-active="true"></div>
```
存储简单的数据类型： data- 属性最适合存储简单的数据类型，如字符串、数字或布尔值。对于复杂的数据结构，考虑使用 JSON 格式。
```
<div data-user-info='{"name":"John", "age":30}'></div>
```
避免过度使用：不要过度使用 data- 属性来存储大量数据，这可能会导致 HTML 变得臃肿和难以维护。对于大量数据，考虑使用 JavaScript 对象或其他存储方式。

使用 JavaScript 访问 data- 属性：通过 JavaScript 访问 data- 属性时，可以使用 dataset 属性或 getAttribute 方法。

// 使用 dataset 属性
const sortOrder = document.querySelector('div').dataset.sortOrder;

// 使用 getAttribute 方法
const userId = document.querySelector('div').getAttribute('data-user-id');

使用 CSS 选择 data- 属性：可以使用 CSS 选择器选择具有特定 data- 属性的元素。
```
div[data-sort-order="ascending"] {
  /* CSS 样式 */
}
```

在vue中使用

import {ref,watchEffect} from 'vue'

const LOCAL_LEY = '__theme__'
const theme = ref(localStorage.getItem(LOCAL_LEY) || 'light')

watchEffect(()=>{
    localStorage.setItem(LOCAL_LEY,theme.value);
    document.documentElement.dataset.theme = theme.value;//设置它的值
})

//最终的html
<html data-theme='light'></html>

html[data-theme='dark']{//暗色主题
    --text-color:#fff;
    --bg1:#102128;
    --bg2:#2d5567;
}
:root{//亮色主题
    --text-color:#333;
    --bg1:#c7ffdd;
    --bg2:#fbd988;
}