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

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

在原生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-customdiv 元素。我们使用 getElementById() 方法获取这个元素,然后使用 getAttribute('data-custom') 来获取这个自定义属性的值,并将它打印到控制台。


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

相关文章
|
1天前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
10 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
1天前
|
前端开发 JavaScript
前端基础(七)_DOM元素获取(getElementById、getElementsByTagName、getElementsByClassName、querySelector等)
本文介绍了如何在前端通过不同的方法获取DOM元素,包括getElementById、getElementsByTagName、getElementsByClassName、querySelector和querySelectorAll。
9 3
|
1天前
|
JavaScript 前端开发
前端基础(十)_Dom自定义属性(带案例)
本文介绍了DOM自定义属性的概念和使用方法,并通过案例展示了如何使用自定义属性来控制多个列表项点击变色的独立状态。
7 0
前端基础(十)_Dom自定义属性(带案例)
|
9天前
|
JavaScript 前端开发
js删除数组最后一个元素
js删除数组最后一个元素
|
3天前
|
JavaScript
Vue3基础(十wu)___ref获取原生dom元素
本文介绍了Vue3中使用`ref`来获取和操作原生DOM元素的方法,通过示例展示了如何通过`.value`改变元素的样式。
11 0
Vue3基础(十wu)___ref获取原生dom元素
|
17天前
|
JavaScript 前端开发
js怎么定位不同的页面元素
在JavaScript中,有多种方法定位和选择页面元素。
|
20天前
|
存储 JavaScript 前端开发
JS中的数组有哪些常用操作函数和属性
【9月更文挑战第7天】JS中的数组有哪些常用操作函数和属性
10 1
|
1天前
|
移动开发 前端开发 JavaScript
使用html-to-image代替html2canvas,结合jspdf实现下载pdf(下载截图下载前端dom元素)
本文介绍了在前端项目中,当使用`html2canvas`遇到问题时,如何使用`html-to-image`库作为替代方案,结合`jspdf`实现将DOM元素生成为PDF文件并提供下载。文章首先讨论了`html2canvas`可能遇到的问题,并提供了该库的使用示例代码。随后,详细介绍了`html-to-image`库的安装和使用方法,展示了如何将DOM元素转换为Canvas,再利用`jspdf`生成PDF文件。最后,文章通过示例代码说明了整个转换和下载的过程,并展示了效果截图。
6 0
|
7天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
3天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树