背景颜色从表单字段更改

时间:2013-05-22 21:02:00

标签: javascript forms

我需要创建一个能够让用户输入十六进制值的表单,然后在单击时应用该颜色。 我有它在Firefox中工作,除非已经选择了背景图像,它在IE中根本不起作用(惊喜) 我想我需要先删除背景图像。 这就是我到目前为止所拥有的

脚本

$("#newBodyColorBtn").click(function() {
    $("body").css("background-color", $("#newBodyColor").val());
});

表格代码

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

我希望你们能帮忙

帽;)

2 个答案:

答案 0 :(得分:0)

可能会有帮助,请在没有'#'的情况下以十六进制颜色

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

答案 1 :(得分:0)

// without jq:
//    document.getElementById("newBodyColorBtn").click(function(){

//with jq
$("#newBodyColorBtn").click(function() {
    document.body.style.backgroundColor = "#" + document.getElementById("newBodyColor").value;
});

http://jsfiddle.net/HnH5W/

工作;)(在Firefox中),无法用js小提琴检查IE ...被阻止