Docs

Name: Docs
Author: LinkXSystem

ASecurity

- 在 html5 中可为所有元素添加一种自定义的属性，这种属性的前缀以 data- 开头，比如：data-name,目的是为元素提供与页面渲染无关，但与 dom 元素强相关的属性。添加完自定义属性后我们可以通过元素的 dataset 属性来访问其值。 - dataset 是一个 DOMString 的映射，每个自定义数据属性的一个条目。 - 以 data- 开头。它只能包含字母，数字和以下字符： dash (-), dot (.), colon (:), underscore (\_) - 但不是任何 ASCII 大写字母（A 到 Z）。 ```html  <div data-name="linksytem"></div> ``` ```html <div class="user" data-name="link" data-email="examples@gmail.com"></div> <script type="text/javascript"> let users =

3 stars
0 votes
0 copies
2 views
Added February 7, 2026

developmentjavascriptjava

Security analysis

A100/100

Pro scans all 11 files and shows the line behind each finding

Scanned February 12, 2026

npx -y skills add LinkXSystem/learn-guide --skill docs --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Docs?

Add the live security badge to your README. It updates with every re-scan.

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/linkxsystem-docs/badge)](https://www.skillsdirectory.com/skills/linkxsystem-docs)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro

SKILL.md

# Dataset 属性的使用技巧

## 简介

- 在 html5 中可为所有元素添加一种自定义的属性，这种属性的前缀以 data- 开头，比如：data-name,目的是为元素提供与页面渲染无关，但与 dom 元素强相关的属性。添加完自定义属性后我们可以通过元素的 dataset 属性来访问其值。
- dataset 是一个 DOMString 的映射，每个自定义数据属性的一个条目。
- 以 data- 开头。它只能包含字母，数字和以下字符： dash (-), dot (.), colon (:), underscore (\_) - 但不是任何 ASCII 大写字母（A 到 Z）。

## HTML 设置

```html
<!-- 格式是 data-attribute -->
<div data-name="linksytem"></div>
```

## javascript 读取和设置方法

```html
<div class="user" data-name="link" data-email="examples@gmail.com"></div>

<script type="text/javascript">
  let users = document.getElementsByClassName('user');
  users[0].dataset.name = 'linksystem';
  users[0].dataset.someDataAttr = 'ar';

  delete users[0].dataset.name;

  let store = users[0].dataset.email;

  console.log('====================');
  console.log(store);
  console.log('====================');
</script>
```

## 实例

- 参考文章: http://www.zhangxinxu.com/study/201106/dataset-chart-example.html