JavaScript 自定义属性 dataset - JavaScript 编程网

在JavaScript中，自定义属性dataset允许你在HTML元素上绑定自定义的数据属性。这些属性以data-前缀开始，使你能够在不污染全局HTML属性命名空间的情况下，为元素附加额外信息。这对于存储和操作元素相关的数据非常有用，尤其是在处理DOM操作或应用特定逻辑时。

如何设置和获取dataset属性

设置dataset属性

在JavaScript中，你可以直接通过元素的dataset属性来设置或获取这些自定义数据属性。例如，给一个元素添加一个名为data-user-id的自定义属性：

let element = document.getElementById('someElement');
element.dataset.userId = '12345';

这会在HTML中创建（或更新）如下属性：

<div id="someElement" data-user-id="12345"></div>

获取dataset属性

同样地，你可以通过相同的语法获取这些值：

let element = document.getElementById('someElement');
let userId = element.dataset.userId;
console.log(userId); // 输出: "12345"

注意事项

驼峰命名：在JavaScript中访问这些属性时，data-后的部分会自动转换为驼峰命名。比如，data-user-id在JavaScript中应写作dataset.userId。
字符串值：dataset属性值始终是字符串类型。如果你需要存储其他类型的数据（如数字、布尔值），需要在使用时手动转换类型。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dataset Example</title>
    <script>
        window.onload = function() {
            let myElement = document.getElementById('exampleElement');
            console.log(myElement.dataset.exampleText); // 获取数据
            myElement.dataset.anotherExample = 'New Value'; // 设置数据
        };
    </script>
</head>
<body>
    <div id="exampleElement" data-example-text="Hello, World!" data-another-example="Initial Value"></div>
</body>
</html>

在这个示例中，页面加载后，脚本会输出元素的data-example-text属性值，并修改data-another-example的值。

声明：本站所有文章和图片，如无特殊说明，均为原创发布。商业转载请联系作者获得授权，非商业转载请注明出处。

真诚赞赏，手留余香

赞赏