如何通过输入值更改div边框颜色？

Question

How to change div border-color by input value?如何通过输入值更改div边框颜色？

My Code我的代码

 function myFunction() { var color = document.getElemntByID("inpx").value; document.getElementById("divx").style.borderColor = color; }

 <!DOCTYPE html> <html> <head> </head> <body> <div id=divx"> </div> <button onClick=""> </button> <script> </script> </body> </html>

Answer 1

Don't use on* inline JS handlers/attributes.不要使用on*内联 JS 处理程序/属性。 Use Element.addEventListener() .使用Element.addEventListener() 。 JS should in in one place only, and that's either your JavaScript tag or file. JS 应该只在一个地方，那就是你的 JavaScript 标签或文件。
getElemntByID should be getElementById getElemntByID应该是getElementById
Use input type="color"使用输入type="color"

Create a reusable setBorderColor(Element, color) function:创建一个可重用的setBorderColor(Element, color)函数：

 const EL = (sel, EL) => (EL||document).querySelector(sel); const setBorderColor = (el, color) => el.style.borderColor = color; const EL_inpx = EL("#inpx"); const EL_divx = EL("#divx"); EL_inpx.addEventListener("input", () => { setBorderColor(EL_divx, EL_inpx.value); }); setBorderColor(EL_divx, EL_inpx.value);

 #divx {border: 10px solid transparent;}

 <input id="inpx" type="color" value="#ff0088"> <div id="divx">test</div>

Answer 2

try this: run试试这个：运行

function myFunction() {
  const color = document.getElementById("inpx").value;
  document
    .getElementById("divx")
    .setAttribute("style", "background-color:" + color);
}

Answer 3

 function myFunction() { const color = document.getElementById("inpx").value; document.getElementById("divx").style.borderColor = color; }

 #divx { width: 50px; height: 50px; border-width: 1px; border-style: solid; margin-bottom: 1rem; }

 <html> <body> <div id="divx"></div> <input type="text" value="blue" id="inpx"> <button onClick="myFunction()">Set border color</button> </body> </html>

如何通过输入值更改div边框颜色？

问题描述

3 个解决方案

解决方案1
1 2021-10-27 15:03:35

解决方案2
0 2021-10-27 20:04:55

解决方案3
-1 2021-10-27 15:08:37

如何通过输入值更改div边框颜色？

问题描述

3 个解决方案

解决方案1 1 2021-10-27 15:03:35

解决方案2 0 2021-10-27 20:04:55

解决方案3 -1 2021-10-27 15:08:37

解决方案1
1 2021-10-27 15:03:35

解决方案2
0 2021-10-27 20:04:55

解决方案3
-1 2021-10-27 15:08:37