ie10仅支持dataset读取,写操作无效且无报错;应统一使用getattribute/setattribute操作data属性,避免依赖dataset写能力。

IE10 对 dataset API 是部分支持的,但存在关键限制:只读可用,写操作会失败。
IE10 中 dataset 的实际行为
IE10 实现了 dataset 的读取能力(即 el.dataset.xxx 可以获取值),但不支持通过 dataset 设置新属性或修改已有属性。尝试赋值如 el.dataset.foo = "bar" 不会报错,但 DOM 上不会生成 data-foo 属性,后续也无法读到该值。
- 读取有效:
<div data-id="123"></div>→el.dataset.id返回"123" - 写入无效:
el.dataset.newKey = "val"→ DOM 无变化,el.getAttribute("data-new-key")仍为null - 驼峰转换在 IE10 中基本不可靠,比如
data-user-id无法通过el.dataset.userId稳定访问
为什么 getAttribute 和 setAttribute 更稳妥
在需要兼容 IE10(及更低版本)的项目中,直接使用原生 DOM 方法是唯一可靠路径。所有主流 polyfill(包括 iview 内部处理)最终都 fallback 到这套逻辑。
- 读取统一用:
el.getAttribute("data-xxx") - 写入统一用:
el.setAttribute("data-xxx", "value") - 删除用:
el.removeAttribute("data-xxx") - 注意:属性名必须带
data-前缀,不能省略
Vue + iview 项目中的典型报错场景
iview 组件(如 Table、Modal)内部依赖 dataset 设置临时状态,一旦在 IE10 运行,就会出现“无法设置 dataset 属性”类静默失败,表现为组件交互异常(如点击无响应、数据不更新),控制台通常不报错,排查困难。
- 常见现象:
Modal打开后遮罩层不显示、Table行点击事件丢失 - 根本原因:iview 源码中类似
el.dataset._uid = id的写操作被 IE10 忽略 - 临时缓解:全局 patch
HTMLElement.prototype.dataset,但仅限读取;写操作必须拦截并转为setAttribute
真正跨浏览器安全的操作,从来不是靠猜 dataset 支持到哪一步,而是从一开始就避开它在旧环境里的写能力缺陷——哪怕只差一个 IE10,也得把 getAttribute/setAttribute 当成默认方案。
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!











