在 IE 和 JSFiddle 中使用 elem.dataset 的问题

背景

在前端开发中，我们通常需要通过 JavaScript 操作 DOM 元素的属性和数据。其中一个常用的 API 就是 dataset，它可以让我们方便地读取和修改 HTML 元素上的自定义数据属性。

然而，在某些情况下，我们可能会遇到一些奇怪的问题，特别是在旧版的 Internet Explorer 浏览器和在线代码编辑器 JSFiddle 中使用 dataset 时。这篇文章将介绍这些问题并提供解决方案。

问题描述

假设我们有以下 HTML 代码：

<div id="my-div" data-color="red"></div>

我们可以使用 dataset API 来读取其 data-* 属性：

const myDiv = document.querySelector('#my-div');
const color = myDiv.dataset.color;
console.log(color); // "red"

在大多数现代浏览器中，这段代码运行正常，但是在 IE 浏览器和 JSFiddle 中却会出现问题。具体来说，当我们在 IE 浏览器中运行该代码时，color 变量的值为 undefined；而在 JSFiddle 中，则会报错 Cannot read property 'color' of undefined。

原因分析

这个问题的原因是 dataset API 并不是标准的 DOM API，而是 HTML5 规范中新增的功能。因此，旧版的 IE 浏览器不支持该 API，而 JSFiddle 中使用的是嵌套在 iframe 中的旧版 IE 浏览器。

为了解决这个问题，我们需要做一些兼容性处理。

解决方案

1. 使用 getAttribute() 方法

getAttribute() 方法是 DOM API 的标准方法，可以用于获取元素上的属性值，包括自定义数据属性。因此，在 IE 浏览器和 JSFiddle 中，我们可以使用 getAttribute('data-*') 来代替 dataset.*。

const myDiv = document.querySelector('#my-div');
const color = myDiv.getAttribute('data-color');
console.log(color); // "red"

2. 使用 polyfill 库

如果你不想在代码中修改大量的 dataset 调用，那么可以考虑使用 polyfill 库来实现对 dataset API 的兼容性支持。其中一个常用的库是 html5shiv，它可以在 IE 浏览器中模拟 HTML5 新增的元素和 API。

<!-- 在 head 标签中引入 html5shiv.js -->
<!--[if lt IE 9]>
<script src="//cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

使用该库后，我们就可以在 IE 浏览器中使用 dataset API 了。

总结

在前端开发中，我们经常需要操作 DOM 元素的属性和数据。dataset API 可以方便地读取和修改 HTML 元素上的自定义数据属性，但是在旧版的 IE 浏览器和 JSFiddle 中使用时会出现问题。为了解决这个问题，我们可以使用 getAttribute() 方法或者 polyfill 库进行兼容性处理。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28357