JavaScript 如何在鼠标移动时改变Div的背景颜色

在JavaScript代码中，鼠标移动事件被用来改变HTML元素的背景颜色。我们还想在把鼠标从元素上移开后把颜色恢复为蓝色。因此，我们也使用了mouseout事件。这将在我们把鼠标指针从元素上移开时发生。

getElementById()产生一个element对象，代表id属性与提供的字符串相匹配的元素。因为如果提供的元素ID必须是唯一的，它们是快速检索单个元素的方便方法。

addEventListener()函数被用来将事件处理程序与一个特定的元素联系起来。它对当前的事件处理程序没有影响。事件被认为是JavaScript的一个必要组成部分。一个网页对已经发生的事件作出回应。事件可以由用户或通过API产生。一个事件监听器是一个等待事件发生的JavaScript进程。addEventListener()方法是一个JavaScript构造函数。我们可以在一个元素上添加许多事件处理程序，而不会覆盖当前的事件处理程序。

使用style.backgroundColor属性

style.backgroundColor属性用于改变元素的颜色，它返回代表背景颜色的字符串值。这些背景属性的默认值是透明的。

Document.querySelectorAll()、getElementById()和Document.querySelector()只能在全局文档对象中访问。为了给网页添加功能，我们使用了JavaScript代码。在这个案例中，我们利用了带有 “id “参数的箭头函数。我们还可以使用CSS代码来修改背景颜色。这些方法都很容易使用，我们用一个样式的例子来展示所有的代码。

语法

The following is the syntax for the background color property −

document.getElementById('id').style.backgroundColor = 'color';

参数

backgroundColor – 改变背景的颜色。
getElementById – 用于读取和编辑特定的HTML元素。
color – 用于定义显示的颜色。

例子

在这些例子中，我们将看到如何使用JavaScript来改变一个Div的背景颜色。

<html>
   <head>
      <style>
         #sampleid {
           background-color: blue;
            width: 650px;
            height: 300px;
         }
      </style>
   </head>
   <body>
      <h2>Changing the Background color of a Div on Mouse Move Over</h2>
      <p> Move the mouse over the below DIV to change the background color</p>
      <div id="sampleid"></div>
      <script>
         document.getElementById("sampleid").addEventListener("mouseover", function() {
            document.getElementById("sampleid").style.backgroundColor = "pink";
         });
         document.getElementById("sampleid").addEventListener("mouseout", function() {
            document.getElementById("sampleid").style.backgroundColor = "violet";
         });
      </script>
   </body>
</html>

正如我们在例子中看到的，这里我们使用了addEventListener()、mouseover和mouseout事件。如果你在浏览器中执行整个代码，你会看到蓝色的方块。然而，如果你把鼠标指针放在该元素上，颜色会变成粉红色。当你把鼠标指针从该元素上移开时，背景颜色就会恢复为紫色。

例子

让我们看看另一个例子，通过使用querySelector()、addEventListener()和JavaScript的style.background属性，在鼠标移过时改变Div的背景颜色。

<html>
   <head>
      <style>
         .classfirst {
            width: 600px;
            background: green;
            height: 450px;
            position: absolute;
         }
      </style>
   </head>
   <body>
      <h2>Changing the background color of a Div on Mouse Move Over</h2>
      <p> Move the mouse over the below DIV to change the background color</p>
      <div class="classfirst"></div>
      <script>
         var color = ["blue", "purple","orange", "black", "white"];
         document.querySelector("div").addEventListener("mouseover", function () {
            document.querySelector("div").style.background = color[Math.floor(Math.random() * color.length)];
         })
      </script>
   </body>
</html>

div框的背景颜色可以随时用HTML、CSS和JavaScript来修改。为了挑选元素，我们将使用querySelector()和addEventListener()方法。

document.querySelector()返回文档中与提供的选择器或一组选择器相匹配的第一个元素。当JavaScript在文档中匹配一个给定的元素时，它会在HTML元素中找到其应用。如果没有发现匹配，则默认返回null。

在第1步中，我们将为一个数组构造不同的颜色。

第2步是使用querySelector()函数挑选div元素，然后用addEvenListener()方法给它添加一个事件处理程序（鼠标移动）。

总结

在这篇文章中，我们已经成功地解释了如何使用JavaScript在鼠标移过时改变Div的背景颜色，并举了一些例子。我们使用了两个不同的例子，在第一个例子中，我们使用了addEventListener，mouseover和mouseout事件，以及style.backgroundColor属性。在第二个例子中，我们使用了addEventListener、querySelector和style.background属性来改变一个Div的背景颜色。