从表单字段更改背景颜色
[英]Background color change from form field
问题描述
I need to create a form with the ability to let the user input a hex value, then upon click it applies that color. 
我需要创建一个能够让用户输入一个十六进制值的表单，然后单击该表单即可应用该颜色。 I have it working in firefox unless there is a background image already chosen, and it won't work in IE at all(surprise surprise) I think I need to have the background image removed first. 除非已经选择了背景图片，否则我将它在firefox中工作，并且它根本不会在IE中工作（惊讶），我想我需要先删除背景图片。 This is what I have so far 这就是我到目前为止
script 脚本
$("#newBodyColorBtn").click(function() {
$("body").css("background-color", $("#newBodyColor").val());
});
Form code 表格代码
<form action="#" method="get" name="putcolor">
<strong>Put your color value here</strong> <input id="newBodyColor" type="text" value="" size="15">
<button id="newBodyColorBtn">Change Body Color</button>
</form>
i hope you guys can help 我希望你们能帮助
Cap;) 帽;）
2 个解决方案
解决方案1
0 2013-05-22 21:22:37
May help, color in hex without '#' 可能有帮助，十六进制颜色不带“＃”
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function changeBG() {
document.body.style.background = "#" + $("#newBodyColor").val();
}
</script>
</head>
<body>
<strong>Put your color value here #</strong> <input id="newBodyColor" type="text" value="" size="6">
<button id="newBodyColorBtn" onclick="changeBG()">Change Body Color</button>
</body>
</html>
解决方案2
0 2013-05-22 21:25:22
// without jq:
// document.getElementById("newBodyColorBtn").click(function(){
//with jq
$("#newBodyColorBtn").click(function() {
document.body.style.backgroundColor = "#" + document.getElementById("newBodyColor").value;
});
http://jsfiddle.net/HnH5W/ http://jsfiddle.net/HnH5W/
works ;) (in Firefox), cant check IE with js fiddle... gets blocked 作品;）（在Firefox中），无法用js小提琴检查IE ...被阻止
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.