如何在 JavaScript 中使用 document.body？

在本教程中，我們將學習如何在 JavaScript 中使用 document.body。

在 JavaScript 中使用 document.body 屬性來獲取文件的主體，即 <body> 標籤。<body> 標籤定義了文件的主體。HTML 文件的全部內容，包括所有標題、段落、影像、超連結、表格、列表和其他元素，都包含在 <body> 元素中。

在一個 HTML 文件中，只能有一個 <body> 元素。

在本教程中，我們將使用 JavaScript 中的 document.body 來：

  • 更改主體的背景顏色
  • 在主體末尾新增一個新元素

使用 document.body 更改主體的背景顏色

在 JavaScript 中，document.body 包含 body 標籤的所有屬性和方法。例如，backgroundColor 屬性指定 body 標籤的背景顏色，這意味著可以使用此屬性修改整個文件的主體顏色。backgroundColor 屬性在 document.body 的 style 物件中可用，因此我們可以在 JavaScript 程式碼中輕鬆使用它。

語法

document.body.style.backgroundColor = color

在上面的語法中，我們使用 document.body 的 backgroundColor 屬性來更改主體的背景顏色。“color”是顏色名稱或顏色程式碼。

示例

在下面的示例中，我們使用 JavaScript 中的 document.body 來更改主體的背景顏色。我們使用一個與點選事件關聯的按鈕“更改背景顏色”。每當使用者點選按鈕時，點選處理程式函式就會執行；在本例中，它是“changeBg()”函式。此函式使用 document.body 和 backgroundColor 屬性來更改主體的背景顏色。

<html>
<body>
   <h2>Change the background color of the body using the <i>document.body</i> in JavaScript</h2>
   <button onclick = "changeBg()"> Change background-color </button>
   <p>Click on the above button to change the background color of the body!</p>
   <script>

      // 'Change background-color' click event handler funtion
      function changeBg() {
         // using the document.body
         document.body.style.backgroundColor = 'rgb(226, 255, 196)'
      }
   </script>
</body>
</html>

使用 document.body 在主體末尾新增一個新元素

在 JavaScript 中，我們必須首先使用 document.createElement() 方法建立元素才能在主體末尾新增一個新元素。其次，我們需要在新元素中新增一些內容，然後使用 document.body 的 appendChild() 方法，我們可以在 body 標籤的末尾新增這個新元素。

語法

// creating new element
const newElement = document.createElement(type)
newElement.innerHTML = 'It is a new element'

// adding a new element at the end of the body
document.body.appendChild(newElement)

在上面的語法中，我們使用 document.createElement() 方法建立一個元素，“type”是使用者想要建立的元素型別。document.body 的 appendChild() 方法用於在主體末尾新增一個新元素。

示例

在下面的示例中，我們使用 JavaScript 中的 document.body 在主體末尾新增一個新元素。一個按鈕“新增新元素”與點選事件一起使用，每當使用者點選按鈕時，該事件會執行一個點選處理程式函式。此函式使用 document.body 和 document.createElement() 方法建立一個型別為“p”的新元素並將其新增到主體的末尾。

<html>
<body>
   <h2>Add a new element at the end of the body using the <i>document.body</i> in JavaScript</h2>
   <button onclick = "addNewElement()"> Add new element</button>
   <p>Click on the above button to add a new element at the end of the body!</p>
   <script>
      // 'Add new element' click event handler funtion
      function addNewElement() {
         // creating new element
         const newElement = document.createElement('p')
         newElement.innerHTML = 'It is a new element'
         // adding a new element at the end of the body
         document.body.appendChild(newElement)
      }
   </script>
</body>
</html>

本教程教我們如何在 JavaScript 中使用 document.body。我們討論了 document.body 的兩種用途。在第一個示例中，我們使用 document.body 更改主體的背景顏色，在第二個示例中，我們在主體的末尾新增一個新元素。建議通讀並練習這些示例以更好地理解 document.body 的作用。

更新於：2022年10月31日

9K+ 次瀏覽

啟動您的 職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.