使用 JavaScript 访问数据属性

Question

我一直在使用：

var data = element.getAttribute('data-name');

不过好像比较好用'dataset'

var data = element.dataset.name

但我的问题是：无论如何我可以将 element.dataset 与 var 一起使用吗？例如，我无法让它工作：

var dataName = 'test';

var data = element.dataset.dataName;

Answer 1

考虑一下您编写的代码实际做了什么。

var data = element.dataset.name 是您熟悉的有效代码 – 它在 element.dataset 中查找名为 name 的属性。在这种情况下，name 不是引用变量的标识符。

以完全相同的方式，代码 element.dataset.dataName 在 element.dataset 中查找属性 dataName。 dataName 不被视为标识符。

你要做的是寻找一个名为 test 的属性，你的变量 dataName.

的内容

为此，您需要使用括号表示法：

var dataName = 'test';

var data = element.dataset[dataName];

这是演示此方法的有效代码片段：

var element = document.getElementsByTagName('div')[0];

var dataName = 'test';
var data = element.dataset[dataName];

console.log(data);

<div data-test="success"></div>

您也可以查看 variable variables，尽管许多人会建议在没有必要时不要在 javascript 中使用它们。

Answer 2

实际上你可以用 bracket-notation 来做到这一点。 element.dataset 将 return 元素 dataset 中可用的对象 ，因此有两种方法可以访问对象中的属性 dot-notation 和 bracket-notation。然后 每当你想引用一个 string 的元素时，最好的方法是使用 bracket-notation.

所以你的代码应该是这样的：

var element = document.querySelector('div');
var dataName = 'test';
var data = element.dataset[dataName];

console.log('element.dataset is:', element.dataset)
console.log('element.dataset[dataName] is:', data)

<div data-test="Test" data-foo="bar"></div>

使用 JavaScript 访问数据属性

Accessing data attributes with JavaScript

javascript

attributes

dataset