如何使用JavaScript在鼠标移动上更改DIV的背景颜色

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

getElementById()生成一个表示ID属性与提供的字符串匹配的元素的对象。因为元素ID在提供时必须是唯一的，所以它们是一种快速检索单个元素的方便方法。

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

使用style.backgroundColor属性

style.backgroundColor属性用于更改元素的颜色，并返回表示背景颜色的字符串值。这些背景属性的默认值为透明。

Document.querySelectorAll()、getElementById()和Document.querySelector()仅在全局document对象上可用。为了为网页增加功能，需要使用JavaScript代码。在这种情况下，我们使用带有”id”参数的箭头函数。我们也可以使用CSS代码来修改背景颜色。这些都是使用的简单方法，并且我们通过一个具有样式示例的代码来显示所有代码。

语法

以下是背景颜色属性的语法 –

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元素，然后使用addEventListener()方法向其添加事件处理程序（mouseover）。

结论

在本文中，我们成功地解释了如何使用JavaScript改变鼠标移动时div的背景颜色，并提供了示例。我们使用了两个不同的示例，第一个示例中使用了addEventListener、mouseover和mouseout事件以及style.backgroundColor属性。第二个示例中，我们使用了addEventListener、querySelector和style.background属性来改变div的背景颜色。