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


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

相关文章
|
JSON JavaScript 数据格式
jQuery操作页面元素属性和内容
jQuery操作页面元素属性和内容
54 0
|
4月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
160 0
|
4月前
|
JavaScript 前端开发
原生JS如何查询元素属性
原生JS如何查询元素属性
34 0
|
JavaScript 前端开发
jQuery改变单个元素属性问题
div嵌套div改变外层div字体颜色保留内层div字体颜色出现同时改变的情况解决方案
113 6
jQuery改变单个元素属性问题
|
11月前
|
JavaScript
jquery给元素设置属性
jquery给元素设置属性
|
缓存 移动开发 JavaScript
jQuery 获取设置元素属性
jQuery 获取设置元素属性
jQuery 获取设置元素属性
|
XML 数据格式 开发者
使用 dom4j 实现获取属性值的操作| 学习笔记
快速学习使用 dom4j 实现获取属性值的操作。
1202 0
|
Web App开发 JavaScript 前端开发
JavaScript 技术篇-通过代码获取dom元素绑定的监听事件,chrome浏览器查看js元素绑定的监听事件
JavaScript 技术篇-通过代码获取dom元素绑定的监听事件,chrome浏览器查看js元素绑定的监听事件
1255 0
JavaScript 技术篇-通过代码获取dom元素绑定的监听事件,chrome浏览器查看js元素绑定的监听事件
|
前端开发 JavaScript
jQuery获取和设置元素属性
获取和设置元素属性的操作
132 0
|
JavaScript PHP
jquery同时给两个元素绑定同一个click事件
jquery同时给两个元素绑定同一个click事件
466 0