如何使用查询查询选择器更改背景颜色 - Javascript (1)

📌 相关文章

📜 如何使用查询查询选择器更改背景颜色 - Javascript (1)

📅 最后修改于: 2023-12-03 14:52:05.595000 🧑 作者: Mango

如何使用查询查询选择器更改背景颜色 - Javascript

在 Javascript 中使用查询选择器（query selector）可以很方便地选中想要修改的元素，并对其进行操作。本文将介绍如何使用查询选择器来更改背景颜色。

步骤

首先，为想要更改背景颜色的元素添加一个 ID 或 class，如下所示：

<div id="myDiv"> Hello World! </div>

在 JavaScript 文件中，通过查询选择器选中该元素，并将其存储在一个变量中，如下所示：

const myDiv = document.querySelector('#myDiv');

这样，我们就可以通过 myDiv 变量来访问该元素。

使用 style 属性来更改背景颜色，如下所示：

myDiv.style.backgroundColor = 'red';

这会将 myDiv 的背景颜色更改为红色。

完整示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Query Selector Example</title>
  </head>
  <body>
    <div id="myDiv"> Hello World! </div>
    <script>
      const myDiv = document.querySelector('#myDiv');
      myDiv.style.backgroundColor = 'red';
    </script>
  </body>
</html>

注意事项

查询选择器可以选中任何 HTML 元素，包括 div、span、p、a、img 等。
如果想要选中多个元素，可以使用 document.querySelectorAll() 方法，它返回一个 NodeList，可以对其中的每个元素进行操作。
使用 style 属性来修改 CSS 样式。可以使用任何 CSS 属性，如 backgroundColor、fontSize、color 等。
也可以在 CSS 文件中定义类，然后使用 JavaScript 来增加或减少元素的类以修改样式。