[英]change box color using drop down menu in javascript
我想使用 colors 在数组中的下拉菜单更改框（div 标签）的颜色。 选择每种颜色时，框背景应更改为该颜色，并在 1000 毫秒后更改为银色。
const data = [ "Teal", "SkyBlue", "DarkSeaGreen", "Purple", "LightPink", "Crimson", ]; const defaultColor = "Silver"; data.forEach((item) => { let colorSelect = document.querySelector("#color-select"); let node = document.createElement("option"); colorSelect.append(node); node.setAttribute("value", `${item}`); node.innerHTML = `${item}`; let newBox = document.querySelector("#box"); newBox.style.backgroundColor = node.value; console.log(node); }); setTimeout(() => { document.querySelector("#box").style.backgroundColor = defaultColor; }, 1000);
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>رنگها.</title> <link rel="stylesheet" href="style.css" /> </head> <body> <select id="color-select"> <option value="">یک رنگ را انتخاب کنید</option> </select> <div id="box"></div> <script src="script.js"></script> </body> </html>
看看这段代码，我在#box 中添加了一个宽度和高度以使其可见（CSS），另外，从each循环中删除了几行，因为它们不是必需的，将colorSelect移出循环，因为我们想使用它在循环内部和外部进行eventListener分配，最后一个将负责触发所需的操作并更改框的颜色，我们还需要超时在该 eventListener function 内，所以它会在每次颜色时运行已更改，否则只需将其移回原来的位置
const data = [ "Teal", "SkyBlue", "DarkSeaGreen", "Purple", "LightPink", "Crimson", ]; const defaultColor = "Silver"; const colorSelect = document.querySelector("#color-select"); data.forEach((item) => { let node = document.createElement("option"); colorSelect.append(node); node.setAttribute("value", `${item}`); node.innerHTML = `${item}`; }); colorSelect.addEventListener('change',function(evt) { document.querySelector("#box").style.backgroundColor = evt.target.value setTimeout(() => { document.querySelector("#box").style.backgroundColor = defaultColor; }, 1000); });
#box { background-color: Silver; height: 500px; width: 500px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>رنگها.</title> <link rel="stylesheet" href="style.css" /> </head> <body> <select id="color-select"> <option value="">یک رنگ را انتخاب کنید</option> </select> <div id="box"></div> <script src="script.js"></script> </body> </html>
您必须将行newBox.style.backgroundColor =...添加到发生更改时执行的事件侦听器。 在您的代码中，您在初始化中运行它。 其他细节是你的 div 是空的（可能是不可见的），我添加了一个 （空白）以确保它是可见的。
const data = [ "Teal", "SkyBlue", "DarkSeaGreen", "Purple", "LightPink", "Crimson", ]; const defaultColor = "Silver"; const colorSelect = document.querySelector("#color-select"); const newBox = document.querySelector("#box"); data.forEach((item) => { let node = document.createElement("option"); colorSelect.append(node); node.setAttribute("value", `${item}`); node.innerHTML = `${item}`; console.log(node); }); colorSelect.addEventListener('change', () => { newBox.style.backgroundColor = colorSelect.value; }) setTimeout(() => { document.querySelector("#box").style.backgroundColor = defaultColor; }, 1000);
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>رنگها;</title> <link rel="stylesheet" href="style.css" /> </head> <body> <select id="color-select"> <option value="">یک رنگ را انتخاب کنید</option> </select> <div id="box"> </div> <script src="script.js"></script> </body> </html>
使用JavaScript或jQuery或CSS在下拉菜单中更改选项的颜色
[英]Change the color of the options a drop down menu using JavaScript or jQuery or CSS
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.