HTML DOM getElementById()用法及代码示例

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 的元素。使用全局样式属性，我们为锚标记设置颜色和 fontSize 属性值 -

function changeLink() {
   var l = document.getElementById("LINK1");
   l.style.color = "red";
   l.style.fontSize="40px";
}

相关用法

注：本文由纯净天空筛选整理自AmitDiwan大神的英文原创作品 HTML DOM getElementById() method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。