如何定义HTML自定义属性，像class属性一样接受多个值？

在HTML中，自定义属性通常是以data-为前缀的属性，用于存储页面或应用程序的私有数据。这些属性可以让你在不破坏HTML语义的情况下，向元素添加额外的信息。

定义HTML自定义属性

要定义一个HTML自定义属性，你可以按照以下格式进行：

<div data-custom-attribute="value"></div>

这里的data-custom-attribute是自定义属性的名称，value是该属性的值。

接受多个值

HTML自定义属性本身不支持像class属性那样直接接受多个值。但是，你可以通过以下几种方法来实现类似的效果：

方法一：使用空格分隔多个值

虽然这不是官方推荐的做法，但你可以通过空格分隔多个值，并在JavaScript中进行解析。

<div data-custom-attributes="value1 value2 value3"></div>

然后在JavaScript中解析这些值：

const element = document.querySelector('[data-custom-attributes]');
const values = element.getAttribute('data-custom-attributes').split(' ');
console.log(values); // ["value1", "value2", "value3"]

方法二：使用JSON字符串

你可以将多个值存储在一个JSON字符串中，并在JavaScript中进行解析。

<div data-custom-attributes='{"key1": "value1", "key2": "value2", "key3": "value3"}'></div>

然后在JavaScript中解析这个JSON字符串：

const element = document.querySelector('[data-custom-attributes]');
const values = JSON.parse(element.getAttribute('data-custom-attributes'));
console.log(values); // { key1: "value1", key2: "value2", key3: "value3" }

应用场景

HTML自定义属性广泛应用于各种场景，包括但不限于：

存储额外信息：例如，存储用户的偏好设置、商品的价格信息等。
标记和分类：用于标记特定的元素，以便在JavaScript中进行处理。
状态管理：用于存储组件的状态信息。

示例代码

以下是一个完整的示例，展示了如何使用JSON字符串存储多个值，并在JavaScript中进行解析：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Attributes Example</title>
</head>
<body>
    <div id="example" data-custom-attributes='{"key1": "value1", "key2": "value2", "key3": "value3"}'></div>

    <script>
        const element = document.getElementById('example');
        const values = JSON.parse(element.getAttribute('data-custom-attributes'));
        console.log(values); // { key1: "value1", key2: "value2", key3: "value3" }
    </script>
</body>
</html>