如何在 JavaScript 中使用 document.body？

在本教程中，我们将学习如何在 JavaScript 中使用 document.body。

在 JavaScript 中使用 document.body 属性获取文档的 body 部分，即 <body> 标签。<body> 标签定义了文档的主体。HTML 文档的全部内容，包括所有标题、段落、图像、超链接、表格、列表和其他元素，都包含在 <body> 元素中。

在一个 HTML 文档中，只能有一个 <body> 元素。

在本教程中，我们将使用 JavaScript 中的 document.body 来完成以下操作：

  • 更改 body 的背景颜色
  • 在 body 的末尾添加一个新元素

使用 document.body 更改 body 的背景颜色

在 JavaScript 中，document.body 包含 body 标签的所有属性和方法。例如，backgroundColor 属性指定 body 标签的背景颜色，这意味着可以使用此属性修改整个文档的 body 颜色。backgroundColor 属性在 document.body 的 style 对象中可用，因此我们可以在 JavaScript 代码中轻松使用它。

语法

document.body.style.backgroundColor = color

在上面的语法中，我们使用 document.body 的 backgroundColor 属性来更改 body 的背景颜色。'color' 是颜色名称或颜色代码。

示例

在下面的示例中，我们使用 JavaScript 中的 document.body 来更改 body 的背景颜色。我们使用一个名为“更改背景颜色”的按钮，该按钮与一个点击事件相关联。每当用户点击按钮时，都会执行一个点击处理程序函数；在本例中，它是“changeBg()”函数。此函数使用 document.body 和 backgroundColor 属性来更改 body 的背景颜色。

<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 在 body 的末尾添加一个新元素

在 JavaScript 中，我们必须首先使用 document.createElement() 方法创建元素，才能在 body 的末尾添加一个新元素。其次，我们需要在新的元素中添加一些内容，然后使用 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() 方法用于在 body 的末尾添加一个新元素。

示例

在下面的示例中，我们使用 JavaScript 中的 document.body 在 body 的末尾添加一个新元素。一个名为“添加新元素”的按钮与一个点击事件相关联，该事件会在用户点击按钮时执行一个点击处理程序函数。此函数使用 document.body 和 document.createElement() 方法创建一个类型为“p”的新元素，并将其添加到 body 的末尾。

<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 更改 body 的背景颜色，在第二个示例中，我们在 body 的末尾添加一个新元素。建议您通读并练习这些示例，以更好地理解 document.body 的作用。

更新于: 2022-10-31

8K+ 次浏览

启动您的 职业生涯

通过完成课程获得认证

开始学习
广告