数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法学研究如何使用 JavaScript 在鼠标悬停时更改 div 的背景颜色？
JavaScript 代码使用 mouseover 事件来更改 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>
可以使用 HTML、CSS 和 JavaScript 轻松修改 div 框的背景颜色。为了选择元素，我们将使用 querySelector() 和 addEventListener() 方法。
document.querySelector() 返回文档中与提供的选择器或一组选择器匹配的第一个元素。当 JavaScript 匹配文档中的给定元素时，它会在 HTML 元素中找到其应用。如果找不到匹配项，则默认返回 null。
第一步，我们将为数组构建不同的颜色。
第二步是使用 querySelector() 函数选择 div 元素，然后使用 addEvenListener() 方法向其添加事件处理程序 (mouseover)。
结论
在本文中，我们成功地解释了如何使用 JavaScript 以及示例更改 div 在鼠标悬停时的背景颜色。我们使用了两个不同的示例，在第一个示例中，我们使用了 addEventListener、mouseover 和 mouseout 事件以及 style.backgroundColor 属性。对于第二个示例，我们使用了 addEventListener、querySelector 和 style.background 属性来更改 div 的背景颜色。
3K+ 次浏览
