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

Question

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

我的代码

<div id=divx"> </div>
<button onClick=""> </button>

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

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

试试这个： run

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

Answer 3

// colors source: https://raw.githubusercontent.com/bahamas10/css-color-names/master/css-color-names.json
const colors = {
    "aliceblue": "#f0f8ff",
    "antiquewhite": "#faebd7",
    "aqua": "#00ffff",
    "aquamarine": "#7fffd4",
    "azure": "#f0ffff",
    "beige": "#f5f5dc",
    "bisque": "#ffe4c4",
    "black": "#000000",
    "blanchedalmond": "#ffebcd",
    "blue": "#0000ff",
    "blueviolet": "#8a2be2",
    "brown": "#a52a2a",
    "burlywood": "#deb887",
    "cadetblue": "#5f9ea0",
    "chartreuse": "#7fff00",
    "chocolate": "#d2691e",
    "coral": "#ff7f50",
    "cornflowerblue": "#6495ed",
    "cornsilk": "#fff8dc",
    "crimson": "#dc143c",
    "cyan": "#00ffff",
    "darkblue": "#00008b",
    "darkcyan": "#008b8b",
    "darkgoldenrod": "#b8860b",
    "darkgray": "#a9a9a9",
    "darkgreen": "#006400",
    "darkgrey": "#a9a9a9",
    "darkkhaki": "#bdb76b",
    "darkmagenta": "#8b008b",
    "darkolivegreen": "#556b2f",
    "darkorange": "#ff8c00",
    "darkorchid": "#9932cc",
    "darkred": "#8b0000",
    "darksalmon": "#e9967a",
    "darkseagreen": "#8fbc8f",
    "darkslateblue": "#483d8b",
    "darkslategray": "#2f4f4f",
    "darkslategrey": "#2f4f4f",
    "darkturquoise": "#00ced1",
    "darkviolet": "#9400d3",
    "deeppink": "#ff1493",
    "deepskyblue": "#00bfff",
    "dimgray": "#696969",
    "dimgrey": "#696969",
    "dodgerblue": "#1e90ff",
    "firebrick": "#b22222",
    "floralwhite": "#fffaf0",
    "forestgreen": "#228b22",
    "fuchsia": "#ff00ff",
    "gainsboro": "#dcdcdc",
    "ghostwhite": "#f8f8ff",
    "goldenrod": "#daa520",
    "gold": "#ffd700",
    "gray": "#808080",
    "green": "#008000",
    "greenyellow": "#adff2f",
    "grey": "#808080",
    "honeydew": "#f0fff0",
    "hotpink": "#ff69b4",
    "indianred": "#cd5c5c",
    "indigo": "#4b0082",
    "ivory": "#fffff0",
    "khaki": "#f0e68c",
    "lavenderblush": "#fff0f5",
    "lavender": "#e6e6fa",
    "lawngreen": "#7cfc00",
    "lemonchiffon": "#fffacd",
    "lightblue": "#add8e6",
    "lightcoral": "#f08080",
    "lightcyan": "#e0ffff",
    "lightgoldenrodyellow": "#fafad2",
    "lightgray": "#d3d3d3",
    "lightgreen": "#90ee90",
    "lightgrey": "#d3d3d3",
    "lightpink": "#ffb6c1",
    "lightsalmon": "#ffa07a",
    "lightseagreen": "#20b2aa",
    "lightskyblue": "#87cefa",
    "lightslategray": "#778899",
    "lightslategrey": "#778899",
    "lightsteelblue": "#b0c4de",
    "lightyellow": "#ffffe0",
    "lime": "#00ff00",
    "limegreen": "#32cd32",
    "linen": "#faf0e6",
    "magenta": "#ff00ff",
    "maroon": "#800000",
    "mediumaquamarine": "#66cdaa",
    "mediumblue": "#0000cd",
    "mediumorchid": "#ba55d3",
    "mediumpurple": "#9370db",
    "mediumseagreen": "#3cb371",
    "mediumslateblue": "#7b68ee",
    "mediumspringgreen": "#00fa9a",
    "mediumturquoise": "#48d1cc",
    "mediumvioletred": "#c71585",
    "midnightblue": "#191970",
    "mintcream": "#f5fffa",
    "mistyrose": "#ffe4e1",
    "moccasin": "#ffe4b5",
    "navajowhite": "#ffdead",
    "navy": "#000080",
    "oldlace": "#fdf5e6",
    "olive": "#808000",
    "olivedrab": "#6b8e23",
    "orange": "#ffa500",
    "orangered": "#ff4500",
    "orchid": "#da70d6",
    "palegoldenrod": "#eee8aa",
    "palegreen": "#98fb98",
    "paleturquoise": "#afeeee",
    "palevioletred": "#db7093",
    "papayawhip": "#ffefd5",
    "peachpuff": "#ffdab9",
    "peru": "#cd853f",
    "pink": "#ffc0cb",
    "plum": "#dda0dd",
    "powderblue": "#b0e0e6",
    "purple": "#800080",
    "rebeccapurple": "#663399",
    "red": "#ff0000",
    "rosybrown": "#bc8f8f",
    "royalblue": "#4169e1",
    "saddlebrown": "#8b4513",
    "salmon": "#fa8072",
    "sandybrown": "#f4a460",
    "seagreen": "#2e8b57",
    "seashell": "#fff5ee",
    "sienna": "#a0522d",
    "silver": "#c0c0c0",
    "skyblue": "#87ceeb",
    "slateblue": "#6a5acd",
    "slategray": "#708090",
    "slategrey": "#708090",
    "snow": "#fffafa",
    "springgreen": "#00ff7f",
    "steelblue": "#4682b4",
    "tan": "#d2b48c",
    "teal": "#008080",
    "thistle": "#d8bfd8",
    "tomato": "#ff6347",
    "turquoise": "#40e0d0",
    "violet": "#ee82ee",
    "wheat": "#f5deb3",
    "white": "#ffffff",
    "whitesmoke": "#f5f5f5",
    "yellow": "#ffff00",
    "yellowgreen": "#9acd32"
};

const colorTextInput = document.querySelector("#colorTextInput");
const colorSelector = document.querySelector("#colorSelector");
const updateColorBtn = document.querySelector("#updateColorBtn");

// hexToRgb function source: https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb#answer-5624139
const rgbToHex = (r, g, b) => {
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

const getHexColor = (color) => {
    if (color.length === 0) {
        return null;
    }

    // regex source: https://www.geeksforgeeks.org/how-to-validate-hexadecimal-color-code-using-regular-expression/
    const isHexColor = new RegExp("^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$").test(color);
    if (isHexColor) {
        // Three digit hex to six digit converter
        // Source: https://gomakethings.com/converting-a-color-from-a-three-digit-hexcolor-to-a-six-digit-hexcolor-with-vanilla-js/
        if (color.length === 4) {
            hexColor = color.substr("#".length).split('').map(function (hex) {
                return hex + hex;
            }).join('');
            return "#" + hexColor;
        }
        return color;
    }
    else {
        if (color.startsWith("rgba(")) {
            color = "rgb" + color.substr("rgba".length);
        }

        if (color.startsWith("rgb(")) {
            const csv = color.substr("rgb(".length, color.length - ("rgb(".length + ")".length));
            const rgb = csv.split(",").map(function(item) {
                return Number(item);
            });
            if (rgb.length === 3 || rgb.length === 4) {
                return rgbToHex(rgb[0], rgb[1], rgb[2]);
            }
            else {
                return null;
            }
        }
        else {
            let hexColor = colors[color.toLowerCase()];
            if (typeof hexColor === "string") {
                return hexColor;
            }
            return null;
        }
    }
}

colorTextInput.addEventListener("input", () => {
    let hexColor = getHexColor(colorTextInput.value);
    if (hexColor !== null) {
        colorTextInput.classList.remove("invalid");
        colorSelector.value = hexColor;
    }
    else {
        colorTextInput.classList.add("invalid");
    }
});

colorSelector.addEventListener("input", () => {
    colorTextInput.classList.remove("invalid");
    colorTextInput.value = colorSelector.value;
})

updateColorBtn.addEventListener("click", () => {
    document.getElementById("colorOutput").style.borderColor = colorSelector.value;
});

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

#colorTextInput {
  outline: none;
}

#colorTextInput.invalid {
  border-color: #d93025;
}

#colorControls {
  display: flex;
  gap: .25rem;
}

#colorControls > * {
  border-radius: 0.25rem;
  border: 1px solid black;
}

#colorSelector {
  width: 2rem;
  outline: none;
  -webkit-appearance: none;
}

#colorSelector::-webkit-color-swatch-wrapper {
  padding: 0;
}
#colorSelector::-webkit-color-swatch {
  border: none;
  margin: 1px 0px;
  border-radius: .25rem;
}

<div id="colorOutput" style="border-color: #4169e1;"></div>
<div id="colorControls">
  <input id="colorTextInput" type="text" value="royalblue">
  <input id="colorSelector" type="color" value="#4169e1">
  <button id="updateColorBtn">Set border color</button>
</div>