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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。