HTML DOM getElementById() 方法
htmlweb developmentfront end technology更新于 2024/5/31 9:48:17
HTML DOM getElementById() 方法用于通过将 id 作为参数传递给此函数来返回元素。它是获取元素以供后续操作的最常用且最简单的方法之一。如果指定的 id 不存在，则返回 NULL。
语法
以下是 getElementById() 方法的语法 −
document.getElementById(elementID)
示例
让我们来看一个 getElementById() 方法的示例 −
<!DOCTYPE html>
<html>
<head>
<script>
function changeLink() {
var l = document.getElementById("LINK1");
l.style.color = "red";
l.style.fontSize="40px";
}
</script>
</head>
<body>
<h1>getElementById() example</h1>
<a id="LINK1" href="https://www.google.com">GOOGLE</a>
<p>Click the below button to apply styling to the above link</p>
<button onclick="changeLink()">CHANGE</button>
</body>
</html>
输出
这将产生以下输出 −
点击"更改"按钮时 −
在上面的例子中 −
我们首先创建了一个 id 为"LINK1"的锚元素并将 href 属性值设置为 “https://www.google.com”。
<a id="LINK1" href="https://www.google.com">GOOGLE</a>
然后，我们创建了一个按钮 CHANGE，当用户点击按钮 − 时，它将执行 changeLink() 函数。
<button onclick="changeLink()>>CHANGE</button>
changeLink() 方法使用文档对象的 getElementById() 方法获取 <a> 元素，并将 <a> 元素 ID 作为参数传递。然后，它返回我们分配给变量 l 的元素。使用全局样式属性，我们为锚标签设置颜色和字体大小属性值 −
function changeLink() {
var l = document.getElementById("LINK1");
l.style.color = "red";
l.style.fontSize="40px";
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
