Javascript教程
JavaScript基础
JavaScript Objects
JavaScript BOM
JavaScript DOM
JavaScript OOP
JavaScript Cookies
JavaScript事件
JavaScript异常
JavaScript常用

JavaScript getAttribute()

JavaScript getAttribute()

getAttribute()方法用于获取特定元素的属性值。如果属性存在,则返回表示相应属性值的字符串。如果相应的属性不存在,它将返回一个空字符串或null。
它与 getAttributeNode()方法不同。 getAttributeNode()方法将属性作为Attr对象返回。

语法

element.getAttribute(attributename)

参数值

attributename:是必需的参数。这是我们要从中获取值的属性的名称。
让我们通过使用一些示例来了解它。

Example1

在此示例中,有两个 div 元素,其ID为 div1 div2 ,每个元素均具有 style 属性。我们使用 getAttribute()来获取style属性的值。
我们必须单击给定按钮以获取给定div元素的 style 属性值。
<!DOCTYPE html>
<html>
<head>
<title>
The getAttribute Method
</title>
</head>
<body>
<p>
Welcome to the lidihuo.com
</p>
<p>
Example of the getAttribute() Method
</p>
<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>
输出

Welcome to the lidihuo.com

Example of the getAttribute() Method

This is first div element.

This is second div element.

Example2

我们还可以获得按钮元素的 onclick 属性值。在此示例中,我们提取 onclick 属性的值和 href 属性的值。有一个具有 href 属性的锚元素;我们将使用 getAttribute()方法获取此属性的值。
<!DOCTYPE html>
<html>
<head>
<title>
The getAttribute Method
</title>
</head>
<body>
<p>
Welcome to the lidihuo.com
</p>
<p>
Example of the getAttribute() Method
</p>
<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://www.lidihuo.com/" id = "link"> lidihuo.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>
输出

Welcome to the lidihuo.com

Example of the getAttribute() Method

This is the div element.

lidihuo.com

昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4