如何通過輸入值更改div邊框顏色？

Question

如何通過輸入值更改div邊框顏色？

我的代碼

 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

不要使用on*內聯 JS 處理程序/屬性。 使用Element.addEventListener() 。 JS 應該只在一個地方，那就是你的 JavaScript 標簽或文件。
getElemntByID應該是getElementById
使用輸入type="color"

創建一個可重用的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

試試這個：運行

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