如何通過輸入值更改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>uj5u.com熱心網友回復：
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>uj5u.com熱心網友回復：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/338529.html
標籤：javascript html css 网络
上一篇：無法呼叫嵌入的css/js檔案