JavaScript getAttribute()基础教程文档
收录于 2023-04-20 00:10:05 · بالعربية · English · Español · हिंदीName · 日本語 · Русский язык · 中文繁體
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>
<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>
<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