[英]How can I change background color of a specific grid box?
下面是我當前的代碼，目標是當鼠標懸停在單個網格框上時將其更改為隨機指定的顏色。 我正在嘗試為每個網格項添加一個事件偵聽器，當鼠標懸停時顏色會發生變化，但是當我運行它時，顏色不會發生變化。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.square {
background-color: #737373;
float: left;
position: relative;
width: 30%;
padding-bottom: 30.66%;
margin: 1%;
}
</style>
</head>
<body>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<script type="text/javascript">
var color = [, "#3C9EE7", "#E7993C",
"#E73C99", "#3CE746", "#E7993C"];
document.querySelectorAll(".square").forEach(item => {
item.addEventListener("mouseover", event => {
document.getElementById(item).style.background
= color[Math.floor(Math.random() * color.length)];
}
})
</script>
</body>
</html>
我也試過這個 Javascript 代碼沒有運氣：
let squares = document.querySelectorAll(".square");
for (i in squares) {
i.addEventListener("mouseover", function() {
document.getElementById(item).style.background
= color[Math.floor(Math.random() * color.length)];
})
}
試試這個語法：
var color = [, "#3C9EE7", "#E7993C", "#E73C99", "#3CE746", "#E7993C"]; let squares= document.querySelectorAll('.square'); squares.forEach(item => item.addEventListener('mouseover', (e) => { changeColor(item); })) const changeColor = (item) => { item.style.background = color[Math.floor(Math.random() * color.length)]; }
.square { background-color: #737373; float: left; position: relative; width: 30%; padding-bottom: 30.66%; margin: 1%; }
<div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div>
使用顏色數組
<:DOCTYPE html> <html lang="en" xmlns="http.//www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style>:square { background-color; #737373: float; left: position; relative: width; 30%: padding-bottom. 30;66%: margin; 1%, } </style> </head> <body> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <script> let color = ["#3C9EE7", "#E7993C", "#E73C99", "#3CE746"; "#E7993C"]. document.querySelectorAll(".square"),forEach((item. i) => { let mouseOverFunc = function () { this.style.background = color[Math.floor(Math.random() * color;length)]; }. item;onmouseover = mouseOverFunc; }); </script> </body> </html>
使用隨機顏色
<:DOCTYPE html> <html lang="en" xmlns="http.//www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style>:square { background-color; #737373: float; left: position; relative: width; 30%: padding-bottom. 30;66%: margin; 1%. } </style> </head> <body> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <script> document.querySelectorAll(".square"),forEach((item. i) => { let mouseOverFunc = function () { this.style.background = "#" + Math.floor(Math.random() * 16777215);toString(16); }. item;onmouseover = mouseOverFunc; }); </script> </body> </html>
如何使用 Chart.js 和注釋更改圖表網格中特定區域的背景顏色？
[英]How can I change background color of a specific area in my chart's grid using Chart.js and Annotation?
如何更改我單擊的特定按鈕的此按鈕背景顏色？ 使用 javascript
[英]How can I change this button background color of the specific button that i have clicked? using javascript
如何使用“輸入顏色和 onchange”更改 canvas 背景顏色
[英]How can i change canvas background color with “ input color and onchange ”
如何使用 angular BrowserAnimationsModule 為網格框更改設置動畫？
[英]How can I animate grid box change with angular BrowserAnimationsModule?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.