JavaScript getAttribute()
JavaScript getAttribute()
JavaScript getAttribute()
getAttribute()方法用于获取特定元素的属性值。如果属性存在，则返回表示相应属性值的字符串。如果相应的属性不存在，它将返回一个空字符串或null。
它与
getAttributeNode()方法不同。
getAttributeNode()方法将属性作为Attr对象返回。
getAttributeNode()方法不同。
getAttributeNode()方法将属性作为Attr对象返回。
语法
element.getAttribute(attributename)
参数值
attributename：是必需的参数。这是我们要从中获取值的属性的名称。
让我们通过使用一些示例来了解它。
Example1
在此示例中，有两个
div 元素，其ID为
div1 和
div2 ，每个元素均具有
style 属性。我们使用
getAttribute()来获取style属性的值。
div 元素，其ID为
div1 和
div2 ，每个元素均具有
style 属性。我们使用
getAttribute()来获取style属性的值。
我们必须单击给定按钮以获取给定div元素的
style 属性值。
style 属性值。
<!DOCTYPE html>
<html>
<head>
<title>
The getAttribute Method
</title>
</head>
<body>
<p>
Welcome to the bianchenghao6.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 bianchenghao6.com
Example of the getAttribute() Method
This is first div element.
This is second div element.
Example2
我们还可以获得按钮元素的
onclick 属性值。在此示例中，我们提取
onclick 属性的值和
href 属性的值。有一个具有
href 属性的锚元素；我们将使用
getAttribute()方法获取此属性的值。
onclick 属性值。在此示例中，我们提取
onclick 属性的值和
href 属性的值。有一个具有
href 属性的锚元素；我们将使用
getAttribute()方法获取此属性的值。
<!DOCTYPE html>
<html>
<head>
<title>
The getAttribute Method
</title>
</head>
<body>
<p>
Welcome to the bianchenghao6.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://bianchenghao6.com/" id = "link"> bianchenghao6.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 bianchenghao6.com
Example of the getAttribute() Method
This is the div element.
bianchenghao6.com