您问题中的代码似乎有些混乱,所以我将举一个例子说明我认为您正在尝试做的事情。
首先要考虑的是混合 HTML、Javascript 和 CSS:
为什么在 HTML 中使用 onClick() 是一种不好的做法?
不显眼的 Javascript
内联样式与类
我将删除内联内容并将它们拆分为相应的文件。
接下来,我将使用“click”事件并释放“change”事件,因为不清楚你想要或需要两者。
您的函数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) 组合的十六进制 (hex) 表示法定义的。可以赋予其中一个光源的最低值是 0(十六进制 00)。最高值为 255(十六进制 FF)。
十六进制值写为 3 个两位数,以 # 符号开头。
更新:正如@Ian 所指出的
十六进制可以是 3 或 6 个字符长
资料来源:W3C
数值颜色值
十六进制表示法的 RGB 值的格式是一个“#”,后跟三个或六个十六进制字符。三位 RGB 符号 (#rgb) 通过复制数字而不是添加零转换为六位形式 (#rrggbb)。例如,#fb0 扩展为 #ffbb00。这确保了白色 (#ffffff) 可以用短符号 (#fff) 指定,并消除对显示器颜色深度的任何依赖。
这是一个替代功能,它将检查您的输入是否为有效的 CSS Hex Color,它将仅设置文本颜色,如果无效则发出警报。
对于正则表达式测试,我将使用此模式
/^#(?:[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 上