原生js如何获取dom元素的自定义属性

神明木佑

于 2024-08-10 22:37:57 发布

阅读量109

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/z16638522031/article/details/141097653

版权

在原生JavaScript中，你可以使用 getAttribute() 方法来获取DOM元素的自定义属性。这个方法接受一个参数，即你想要获取的属性的名称，然后返回该属性的值。

以下是一个例子

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>获取自定义属性</title>  
</head>  
<body>  
    <div id="myDiv" data-custom="Hello, World!"></div>  
  
    <script>  
        // 获取元素  
        var div = document.getElementById('myDiv');  
  
        // 获取自定义属性  
        var customAttr = div.getAttribute('data-custom');  
  
        // 打印属性值  
        console.log(customAttr); // 输出: Hello, World!  
    </script>  
</body>  
</html>

在上面的例子中，我们有一个带有自定义属性 data-custom 的 div 元素。我们使用 getElementById() 方法获取这个元素，然后使用 getAttribute('data-custom') 来获取这个自定义属性的值，并将它打印到控制台。

注意，当你使用 getAttribute() 方法时，你需要包括属性的完整名称，包括任何前缀，如 data-。这是因为 data- 前缀用于在HTML5中定义自定义数据属性。虽然浏览器会识别不带 data- 前缀的属性，但通常建议使用 data- 前缀来避免与未来可能添加的HTML标准属性冲突。

神明木佑

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
原生js如何获取dom元素的自定义属性

注意，当你使用 getAttribute() 方法时，你需要包括属性的完整名称，包括任何前缀，如 data-。虽然浏览器会识别不带 data- 前缀的属性，但通常建议使用 data- 前缀来避免与未来可能添加的HTML标准属性冲突。我们使用 getElementById() 方法获取这个元素，然后使用 getAttribute('data-custom') 来获取这个自定义属性的值，并将它打印到控制台。这个方法接受一个参数，即你想要获取的属性的名称，然后返回该属性的值。
复制链接

扫一扫