如何通过javascript在html中创建/获取自定义属性元素？

Question

我下面有相同的元素：

<div cutomsAttr.option1.option2="abc" id="custom">
</div>

我想创建并获取包含修饰符的自定义属性，如果有的话。

例如，在cutomsAttr.option1.option2中，修饰符对象为

{ option1: true, option2: true }.

Answer 1

您可以使用data-*属性，这使我们可以在标准语义HTML元素上存储额外的信息，而无需其他技巧，例如非标准属性或DOM上的额外属性。

语法很简单。属性名称以data-*开头的任何元素上的任何属性都是数据属性。假设您有一个data-，并且想要存储一些没有任何视觉表示的额外信息。只需使用div属性即可：

data

然后在您的代码中，您可以访问其新的

<div id="custom" data-cutomsAttr="abc">
</div>

属性值data-cutomsAttr属性，例如：

dataset

dataset

注意： camelCase属性

const custom = document.querySelector('#custom'); 
console.log( custom.dataset.cutomsattr )

转换为小写

<div id="custom" data-cutomsAttr="abc">
</div>

。

---

现在，为了使“ 包含修饰符的自定义属性具有某种意义，您只需为以下选项设置多个cutomsAttr属性即可：

cutomsattr

然后像这样访问它们：

data

<div id="custom" data-cutomsAttr="abc" data-option1="true" data-option2="false">
</div>

---

[如果您不想设置

const custom = document.querySelector('#custom'); 
const { cutomsattr, option1, option2 } = custom.dataset
console.log( cutomsattr, option1, option2 )

和

<div id="custom" data-cutomsAttr="abc" data-option1="true" data-option2="false">
</div>

所有div，并使用默认值data-option1将它们设为可选，也可以这样：

data-option2

false