在原生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标准属性冲突。