Javascript将文本和背景的颜色更改为输入值

我将使用javascript创建一个函数，用于根据文本输入的值同时更改背景颜色和文本。我需要更改背景颜色，但无法使文本也正常工作

function changeBackground() {
    // The working function for changing background color.
    document.bgColor = document.getElementById("color").value;

    // The code I'd like to use for changing the text simultaneously - however it does not work.
    document.getElementById("coltext").style.color = document.getElementById("color").value;
}

查看上面的代码，文本

document.getElementById（“coltext”）.style.color=x的代码在我输入实际颜色而不是“color”值时起作用

这就是我所指的html（我知道它经过了可怕的优化，但这是一项正在进行的工作）：




此文本的颜色应与您在文本框中输入的颜色相同

显然，不幸的是，我不能这样使用代码。但不管我怎么努力，除此之外，我达到了一种无限的复杂性。这应该是一种简单的解决方法，对吗？
根据您实际想要使用的事件（文本框
更改
，或按钮
单击
），您可以尝试以下方法：

HTML:

演示：

按钮的一个小问题是它是表单中的提交按钮。单击后，它将提交表单（最终只是重新加载页面），并重置来自JavaScript的任何更改。只需使用
onchange
即可根据输入更改颜色。
您问题中的代码似乎有点混乱，因此我将给您举一个我认为您正在尝试做的示例

首先要考虑的是混合HTML、Javascript和CSS：




我将删除内联内容并将其拆分为相应的文件

接下来，我将讨论“click”事件和“change”事件的dispose，因为不清楚您是否想要或需要两者

您的函数
changeBackground
将背景颜色和文本颜色设置为相同的值（您的文本将不会被看到），因此我正在缓存颜色值，因为我们不需要在DOM中查找两次

CSS

HTML

在


资料来源：W3学校


CSS颜色使用十六进制（hex）表示法定义
用于红色、绿色和蓝色值（RGB）的组合。这个
其中一个光源的最小值为0（十六进制
00). 最大值为255（十六进制FF）

十六进制值写为3个两位数，以a开头#
签名

更新：正如@Ian所指出的

十六进制可以是3或6个字符长

资料来源：W3C


RGB值的十六进制格式
符号是一个“#”，后跟三或六
十六进制字符。三位RGB符号（#RGB）为
通过复制数字而不是通过
加零。例如，#fb0扩展为#ffbb00。这确保
白色（#ffffff）可以用短符号（#fff）和
删除对显示颜色深度的任何依赖项

这里有一个替代函数，它将检查您的输入是否是有效的CSS十六进制颜色，它将仅设置文本颜色，或者在无效时抛出警报

对于正则表达式测试，我将使用此模式

但是，如果您是正则表达式匹配的，并且希望将数字分组，那么您将需要不同的模式

在

这是一个进一步的修改，允许使用十六进制

function changeBackground() {
    var names = ["AliceBlue", "AntiqueWhite", "Aqua", "Aquamarine", "Azure", "Beige", "Bisque", "Black", "BlanchedAlmond", "Blue", "BlueViolet", "Brown", "BurlyWood", "CadetBlue", "Chartreuse", "Chocolate", "Coral", "CornflowerBlue", "Cornsilk", "Crimson", "Cyan", "DarkBlue", "DarkCyan", "DarkGoldenRod", "DarkGray", "DarkGrey", "DarkGreen", "DarkKhaki", "DarkMagenta", "DarkOliveGreen", "Darkorange", "DarkOrchid", "DarkRed", "DarkSalmon", "DarkSeaGreen", "DarkSlateBlue", "DarkSlateGray", "DarkSlateGrey", "DarkTurquoise", "DarkViolet", "DeepPink", "DeepSkyBlue", "DimGray", "DimGrey", "DodgerBlue", "FireBrick", "FloralWhite", "ForestGreen", "Fuchsia", "Gainsboro", "GhostWhite", "Gold", "GoldenRod", "Gray", "Grey", "Green", "GreenYellow", "HoneyDew", "HotPink", "IndianRed", "Indigo", "Ivory", "Khaki", "Lavender", "LavenderBlush", "LawnGreen", "LemonChiffon", "LightBlue", "LightCoral", "LightCyan", "LightGoldenRodYellow", "LightGray", "LightGrey", "LightGreen", "LightPink", "LightSalmon", "LightSeaGreen", "LightSkyBlue", "LightSlateGray", "LightSlateGrey", "LightSteelBlue", "LightYellow", "Lime", "LimeGreen", "Linen", "Magenta", "Maroon", "MediumAquaMarine", "MediumBlue", "MediumOrchid", "MediumPurple", "MediumSeaGreen", "MediumSlateBlue", "MediumSpringGreen", "MediumTurquoise", "MediumVioletRed", "MidnightBlue", "MintCream", "MistyRose", "Moccasin", "NavajoWhite", "Navy", "OldLace", "Olive", "OliveDrab", "Orange", "OrangeRed", "Orchid", "PaleGoldenRod", "PaleGreen", "PaleTurquoise", "PaleVioletRed", "PapayaWhip", "PeachPuff", "Peru", "Pink", "Plum", "PowderBlue", "Purple", "Red", "RosyBrown", "RoyalBlue", "SaddleBrown", "Salmon", "SandyBrown", "SeaGreen", "SeaShell", "Sienna", "Silver", "SkyBlue", "SlateBlue", "SlateGray", "SlateGrey", "Snow", "SpringGreen", "SteelBlue", "Tan", "Teal", "Thistle", "Tomato", "Turquoise", "Violet", "Wheat", "White", "WhiteSmoke", "Yellow", "YellowGreen"],
        color = document.getElementById("color").value.trim(),
        rxValidHex = /^#(?:[0-9a-f]{3}){1,2}$/i,
        formattedName = color.charAt(0).toUpperCase() + color.slice(1).toLowerCase();

    if (names.indexOf(formattedName) !== -1 || rxValidHex.test(color)) {
        document.getElementById("coltext").style.color = color;
    } else {
        alert("Invalid CSS Color");
    }
}

document.getElementById("submitColor").addEventListener("click", changeBackground, false);

在
上，以您的示例为例，修复后，将背景颜色和文本颜色设置为相同的颜色，这是您想要的吗？文本将不可见，因为文本框上附加了“onchange”处理程序，按钮上附加了“onclick”。你到底想达到什么目的？@Xotic750如前所述，代码有点混乱——“正在进行的工作”，我试图引用这两种代码，在它开始工作之前，我很少清理不必要的东西。但是，请记住，我指的是身体背景（代码中不是很清楚，但并不相关）。我的内容是白色的。我现在只在JSFIDLE中运行了它，它的功能不符合我的要求，我可以清楚地遵循您的脚本，我认为它应该可以工作，因为它与我的基本相同。只是缓存了“颜色”值。但是，文本保持不变，直到我给它一个非动态值，比如说“红色”，然后按下按钮时它变为红色。但如果使用“颜色”中的值，则不会。这也是我在第一轮比赛中遇到的问题，完全是我的错。我忘了指定它应该使用十六进制值。老实说，我也从未尝试过在代码中输入普通颜色。但是，背景接受十六进制值“ff0000”-例如，而文本不接受。这取决于什么？如果我在文本框中输入“#ff0000”，然后提交，背景会变为红色，文本也会变为红色。你说得对，我错过了。背景从来就不需要“#”这个词，我已经习惯了。非常感谢你的帮助！我将对我的代码进行一些修改，看看是否可以让所有的东西都正常工作。如果你真的想得到一个有效的十六进制数，你应该使用
/^#（[0-9a-f]{3}）（[0-9a-f]{3}）$/I
谢谢你，伊恩。然而，正如我忘记提到的，它应该使用十六进制值。然而，即使使用您的代码，这些都可以在后台工作，这对我来说很奇怪。@user2395622您是什么意思？你到底在输入什么？你必须在它前面加一个“#”是的，对不起，这很有效。后台从不需要我输入“#”。因此，我的初始代码似乎也能正常工作，但我遇到了另一个问题，我认为这完全是由于其他原因造成的-代码没有真正更改为输入的颜色，只是闪烁，然后返回到本机颜色（即使未设置本机颜色/白色）。非常感谢你抽出时间
<input id="color" type="text" onchange="changeBackground(this);" />
<br />
<span id="coltext">This text should have the same color as you put in the text box</span>

function changeBackground(obj) {
    document.getElementById("coltext").style.color = obj.value;
}

#TheForm {
    margin-left: 396px;
}
#submitColor {
    margin-left: 48px;
    margin-top: 5px;
}

<form id="TheForm">
    <input id="color" type="text" />
    <br/>
    <input id="submitColor" value="Submit" type="button" />
</form>
<span id="coltext">This text should have the same color as you put in the text box</span>

function changeBackground() {
    var color = document.getElementById("color").value; // cached

    // The working function for changing background color.
    document.bgColor = color;

    // The code I'd like to use for changing the text simultaneously - however it does not work.
    document.getElementById("coltext").style.color = color;
}

document.getElementById("submitColor").addEventListener("click", changeBackground, false);

/^#(?:[0-9a-f]{3}){1,2}$/i

function changeBackground() {
    var color = document.getElementById("color").value.trim(),
        rxValidHex = /^#(?:[0-9a-f]{3}){1,2}$/i;

    if (rxValidHex.test(color)) {
        document.getElementById("coltext").style.color = color;
    } else {
        alert("Invalid CSS Hex Color");
    }
}

document.getElementById("submitColor").addEventListener("click", changeBackground, false);

function changeBackground() {
    var names = ["AliceBlue", "AntiqueWhite", "Aqua", "Aquamarine", "Azure", "Beige", "Bisque", "Black", "BlanchedAlmond", "Blue", "BlueViolet", "Brown", "BurlyWood", "CadetBlue", "Chartreuse", "Chocolate", "Coral", "CornflowerBlue", "Cornsilk", "Crimson", "Cyan", "DarkBlue", "DarkCyan", "DarkGoldenRod", "DarkGray", "DarkGrey", "DarkGreen", "DarkKhaki", "DarkMagenta", "DarkOliveGreen", "Darkorange", "DarkOrchid", "DarkRed", "DarkSalmon", "DarkSeaGreen", "DarkSlateBlue", "DarkSlateGray", "DarkSlateGrey", "DarkTurquoise", "DarkViolet", "DeepPink", "DeepSkyBlue", "DimGray", "DimGrey", "DodgerBlue", "FireBrick", "FloralWhite", "ForestGreen", "Fuchsia", "Gainsboro", "GhostWhite", "Gold", "GoldenRod", "Gray", "Grey", "Green", "GreenYellow", "HoneyDew", "HotPink", "IndianRed", "Indigo", "Ivory", "Khaki", "Lavender", "LavenderBlush", "LawnGreen", "LemonChiffon", "LightBlue", "LightCoral", "LightCyan", "LightGoldenRodYellow", "LightGray", "LightGrey", "LightGreen", "LightPink", "LightSalmon", "LightSeaGreen", "LightSkyBlue", "LightSlateGray", "LightSlateGrey", "LightSteelBlue", "LightYellow", "Lime", "LimeGreen", "Linen", "Magenta", "Maroon", "MediumAquaMarine", "MediumBlue", "MediumOrchid", "MediumPurple", "MediumSeaGreen", "MediumSlateBlue", "MediumSpringGreen", "MediumTurquoise", "MediumVioletRed", "MidnightBlue", "MintCream", "MistyRose", "Moccasin", "NavajoWhite", "Navy", "OldLace", "Olive", "OliveDrab", "Orange", "OrangeRed", "Orchid", "PaleGoldenRod", "PaleGreen", "PaleTurquoise", "PaleVioletRed", "PapayaWhip", "PeachPuff", "Peru", "Pink", "Plum", "PowderBlue", "Purple", "Red", "RosyBrown", "RoyalBlue", "SaddleBrown", "Salmon", "SandyBrown", "SeaGreen", "SeaShell", "Sienna", "Silver", "SkyBlue", "SlateBlue", "SlateGray", "SlateGrey", "Snow", "SpringGreen", "SteelBlue", "Tan", "Teal", "Thistle", "Tomato", "Turquoise", "Violet", "Wheat", "White", "WhiteSmoke", "Yellow", "YellowGreen"],
        color = document.getElementById("color").value.trim(),
        rxValidHex = /^#(?:[0-9a-f]{3}){1,2}$/i,
        formattedName = color.charAt(0).toUpperCase() + color.slice(1).toLowerCase();

    if (names.indexOf(formattedName) !== -1 || rxValidHex.test(color)) {
        document.getElementById("coltext").style.color = color;
    } else {
        alert("Invalid CSS Color");
    }
}

document.getElementById("submitColor").addEventListener("click", changeBackground, false);

document.getElementById("fname").style.borderTopColor = 'red';
document.getElementById("fname").style.borderBottomColor = 'red';