文本和背景Javascript的颜色改变，输入值(Javascript change color o

我将使用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工程时，I输入的实际颜色，而不是“颜色”值。

这是我指的是该HTML（我知道这是可怕的优化，但它的工作正在进行中）：

<form id="TheForm" style="margin-left:396px;">
    <input id="color" type="text" onchange="changeBackground();" />
    <br/><input id="submitColor" value="Submit" type="button" onclick="changeBackground();" style="margin-left:48px; margin-top:5px;" />
</form>

<span id="coltext">This text should have the same color as you put in the text box</span>

显然，不幸的是，我不能使用这样的代码。但无论有难我尝试，在此之外，我达到一种无限复杂性。它应该是一种简便的方法来解决这个问题，对不对？

Answer 1:

事情似乎在你的问题的代码有点困惑，所以我要给你什么，我认为你尝试做一个例子。

首先考虑是约混合HTML，JavaScript和CSS：

为什么使用HTML的onClick（）不好的做法？

非侵入式JavaScript

内嵌样式VS班

我将删除联内容和这些拆分到相应的文件。

接下来，我会去与“变”事件的“click”事件和displose，因为它是不明确的，你想要或需要两者。

你的功能changeBackground同时设置底色的颜色和文字颜色为相同的值（文字不会被看到），所以我缓存的颜色值，因为我们并不需要看它在DOM的两倍。

CSS

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

HTML

<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>

使用Javascript

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);

上的jsfiddle

~~来源：W3Schools的~~

颜色值
CSS颜色是使用红，绿，和蓝颜色值（RGB）的组合的十六进制（十六进制）表示法来定义。可以给予的光源中的一个最低值是0（十六进制00）。的最高值是255（十六进制的FF）。
十六进制值写作3个位数字，以＃开始的标志。

更新：通过@Ian指出

六角可以是3或6个字符长

来源：W3C

数值颜色值
以十六进制表示的RGB值的格式是一个“＃”后面紧跟三个或六个十六进制字符。三位数RGB表示法（#RGB）通过复制数字，不会被添加零转换成六位形式（#RRGGBB）。例如，＃fb0设备扩展到＃ffbb00。这确保了白色（#FFFFFF）可与短符号（#FFF）来指定，并删除在显示的颜色深度的任何依赖性。

这里是将检查您输入一个有效的CSS十六进制颜色替代功能，它只会设置文本颜色，或者如果它是无效引发警报。

对于正则表达式的测试，我将使用这个模式

/^#(?:[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);

上的jsfiddle

这里是一个进一步的修改，允许通过名称的颜色与沿十六进制。

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);

上的jsfiddle

Answer 2:

根据该事件你真的想使用（文本框change ，或者按钮click ），你可以试试这个：

HTML：

<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>

JS：

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

DEMO： http://jsfiddle.net/6pLUh/

与按钮的一个小问题是，这是一个提交按钮，在表单中。当点击，提交表单（这最终只是重新加载页面），并从JavaScript的任何变化都将复位。只是用onchange允许您更改基于输入的颜色。

Answer 3:

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