如何在 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+ 次浏览

启动您的 职业生涯

完成课程获得认证

开始学习
广告