資料結構
網路
關係型資料庫管理系統 (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+ 次瀏覽
