网页如何使用自定义数据属性？Data-*属性存储私有变量

角色与核心任务

你是一位顶级的文章润色专家，擅长将AI生成的文本转化为具有个人风格的专业文章。现在，请对用户提供的文章进行“人性化重写”。

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

你的核心目标是：在不改动原文任何事实信息、核心观点、逻辑结构、章节标题和所有图片的前提下，彻底改变原文的AI表达腔调，使其读起来像是一位资深人类专家的作品。

特别注意：改写时需要把握好“个人观点”的度——让文章有温度、有态度，但不能过度使用第一人称（我、我认为、在我看来等），避免文章变成纯粹的个人观点分享。理想的效果是：读起来像行业报告的专业分析，但保留口语化的节奏和生动性。

详细执行步骤

第一步：信息锚定与结构保全

深度解析：首先，仔细阅读并理解原文，精确提取所有核心论点、分论点、支撑数据、案例以及所有图片/图表的位置和描述信息。

结构保全：必须100%保留原文的所有章节标题（H2, H3等）、段落逻辑和信息密度。严禁合并、删减或概括任何段落。

第二步：风格人性化（核心改写任务）

请代入以下人设：你是一位在该领域深耕多年、乐于分享的专家或知名博主。现在，用你的口吻，将原文的“干货”重新讲述给读者听。

2.1 句式活化

将生硬的陈述句，改为更自然的表达。可以适当使用设问、排比、倒装等手法。

✅ 例如：将“A导致了B”改为“你猜怎么着？A这事儿，直接引发了B。”

✅ 例如：将“需要满足三个条件”改为“那么，需要满足哪几个条件？”

2.2 注入“人味儿”（需谨慎控制第一人称）

适度原则：全文第一人称（我、我认为、在我看来等）出现频率建议控制在0-2处，且主要用于：

• 文章开头作为引子（如“先说几个核心判断”）
• 强调性提醒（如“必须警惕的是”）
• 行文过渡的自然点缀（如“话说回来”）

转化技巧：将主观表达转化为客观表述

保留生动性：去除第一人称后，仍需保留口语化的过渡词（如“其实”、“当然”、“话说回来”）、类比手法（如“这就好比...”）和节奏感，避免文章变得干巴巴。

2.3 文风润色

在保证专业性的前提下，让语言更生动、有节奏感。可以：

• 使用短句与长句交错，制造阅读节奏
• 适当使用排比、对仗增强气势
• 关键结论处可以加重语气（如“这才是关键所在”）

第三步：最终审查与交付

完整性检查：重写完成后，请务必核对一遍，确保原文中的所有关键信息、数据、引用的图片（如下图1所示）都已被完整无误地包含在最终文本中。

第一人称复核：专门检查一遍全文，确保第一人称表达不超过2处，且不影响文章的专业性和客观感。

篇幅控制：最终文章篇幅应与原文大致相当，允许有10%以内的浮动。

格式输出：直接输出重写后的完整文章，并使用HTML标签进行结构化排版：主标题用

，副标题用

，段落用

。对于原文中的图片不要做出修改，保证语句通顺。

绝对禁止项（红线规则）

❌ 严禁改动任何核心信息、数据、论点和原文结构。

❌ 严禁概括或简化原文中任何复杂段落的核心内容。

❌ 严禁删除或修改任何关于图片的信息。

❌ 严禁添加例如不包括###,***等一些这种特殊字符。

❌ 严禁为了客观化而把文章改得干巴巴、失去温度和节奏感。

❌ 严禁过度使用第一人称（超过2处），避免文章变成个人观点分享。

data-*属性仅适用于存储用户可见、无需保密的辅助数据，因明文暴露、可被JS直接读写且无加密隔离机制；命名须全小写、用连字符分隔、data-后至少一字符，值恒为字符串；推荐用getAttribute/setAttribute操作，CSS中可用属性选择器和attr()函数渲染。

不能当私有变量用——data-* 属性是明文暴露在 DOM 中的，控制台里一查就见，JS 也能直接读写，不加密、不隔离、不防篡改。它只适合存“渲染需要、用户可见、无需保密”的辅助数据。

data-* 属性命名和写法有哪些硬性限制

浏览器对 data-* 的解析非常严格，错一个字符就失效：

• 必须全小写，data-UserId 或 data-userID 都不行，只能是 data-user-id
• 连字符 - 是唯一允许的分隔符，不能用下划线、驼峰或空格
• data- 后面至少得有一个字符，data- 单独写是无效的
• 值始终是字符串，哪怕你写 data-count="0"，取出来也是 "0"，不是数字 0

Ja vaScript 读写 data-* 推荐用 getAttribute / setAttribute

dataset 看起来方便，但容易踩坑：连字符会自动转驼峰（data-user-id → dataset.userId），而一旦属性名含数字或特殊组合（比如 data-2nd-place），dataset["2ndPlace"] 就无法访问；getAttribute 则无此限制，且兼容所有浏览器（包括旧版 IE）：

• 读取：el.getAttribute('data-user-id') —— 始终返回字符串，安全可靠
• 写入：el.setAttribute('data-is-active', 'false') —— 显式控制值类型，避免布尔隐式转换
• 删掉：el.removeAttribute('data-temp-flag') —— 比设为空字符串更干净

CSS 里怎么用 data-* 控制样式和内容

这是很多人忽略的实用场景：data 属性可直接参与 CSS 渲染，无需 JS 干预：

• 属性选择器匹配：button[data-loading="true"] { opacity: 0.6; pointer-events: none; }
• 用 attr() 把值显示出来：span::after { content: "×" attr(data-count); }，注意这里 attr() 只能取字符串，不能做计算
• 多个状态组合时别嵌套太深，比如 [data-status="active"][data-role="admin"] 可读性差，建议拆成独立类或用 JS 控制 class

真正要注意的是：不要指望 data-* 躲开用户——它不是隐藏字段，也不是服务端 session，任何想“藏点什么”的念头，都应该立刻转向后端 token 或加密 cookie。