JavaScript getAttribute() 方法

2025年4月2日 | 2 分钟阅读

getAttribute() 方法用于获取特定元素的属性值。如果该属性存在，它将返回表示相应属性值的字符串。如果相应的属性不存在，它将返回一个空字符串或 null。

它与 getAttributeNode() 方法不同。getAttributeNode() 方法返回的属性是 Attr 对象。

语法

参数值

attributename： 这是必需的参数。它是我们要从中获取值的属性的名称。

让我们通过一些例子来理解它。

示例 1

在此示例中，有两个 id 为 div1 和 div2 的 div 元素，每个元素都有一个 style 属性。我们使用 getAttribute() 方法来获取 style 属性的值。

我们需要点击给定的按钮来获取给定 div 元素的 style 属性的值。

<!DOCTYPE html>
<html>
<head>
<title>
The getAttribute Method
</title>
</head>
<body>
<h1>
Welcome to the javaTpoint.com
</h1>

<h2>
Example of the getAttribute() Method
</h2>

<div id = "div1" style = "background-color: yellow; font-size: 25px; color: red; border: 2px solid red;">
This is first div element.
</div>
<br>
<div id = "div2" style = "background-color: lightblue; font-size: 25px; color: blue; border: 2px solid blue;">
This is second div element.
</div>
<br>
<button onclick = "fun()">
Click me!
</button>
<p id = "p"></p>
<p id = "p1"></p>
<script>
function fun() {
var val = document.getElementById("div1").getAttribute("style");
document.getElementById("p").innerHTML = val;
var val1 = document.getElementById("div2").getAttribute("style");
document.getElementById("p1").innerHTML = val1;
}
</script>
</body>

</html>

输出

执行后，输出为 -

点击按钮后，输出将是 -

示例 2

我们还可以获取按钮元素的 onclick 属性的值。在此示例中，我们正在提取 onclick 属性的值以及 href 属性的值。有一个带有 href 属性的锚元素；我们使用 getAttribute() 方法来获取此属性的值。

<!DOCTYPE html>
<html>
<head>
<title>
The getAttribute Method
</title>
</head>
<body>
<h1>
Welcome to the javaTpoint.com
</h1>

<h2>
Example of the getAttribute() Method
</h2>

<div id = "div1" style = "background-color: yellow; font-size: 25px; color: red; border: 2px solid red;">
This is the div element.
</div>
<br>
<a href = "https://tpointtech.cn/" id = "link"> javaTpoint.com </a>
<br><br>
<button onclick = "fun()" id = "btn">
Click me!
</button>
<p id = "p"></p>
<p id = "p1"></p>
<script>
function fun() {
var val = document.getElementById("btn").getAttribute("onclick");
document.getElementById("p").innerHTML = val;
var val1 = document.getElementById("link").getAttribute("href");
document.getElementById("p1").innerHTML = val1;
}
</script>
</body>

</html>

输出

执行后，输出将是：

点击按钮后，输出为 -

下一主题Map-reduce-javascript

JavaScript getAttribute() 方法

语法

参数值

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript getAttribute() 方法

语法

参数值

示例 1

示例 2

相关帖子

如何在 JavaScript 中创建多行注释？

JavaScript 中的二维数组

JavaScript 索引

在 JavaScript 中隐藏和显示 Div

如何在记事本中保存 JavaScript 文件

JavaScript 算法和数据结构大师课程

JavaScript localStorage

Javascript 代码检查器

JavaScript 调试

JavaScript 换行符

订阅 Tpoint Tech

联系信息

关注我们