如何使用JQuery中的输入框修改CSS

时间:2014-10-26 22:42:43

标签: javascript jquery html css

这是我试图开始工作的代码,我无法弄清楚为什么JQ不会从输入框中选择#cols1 var。

  

这是我正在使用的代码的基本示例。

<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.0.min.js'>
</script>
<script type='text/javascript'>

function changeCon()
{
var cols1 = $('#col1').value;
$('#div1').html('Random text');
$('#div1').css({ backgroundColor: "#cols1" });
}

function startup()
{
$('#bt1').click(changeCon);
}
$(startup);

</script>
</head>
<body>
<input id='col1' type='text' /> <br />
<div id="div1">text div.</div>
<input type="button" id="bt1" value="Submit" />
</body>
</html>

如果有人知道原因,那将是非常欢呼。

3 个答案:

答案 0 :(得分:4)

这样做

var cols1 = $('#col1').val();
$('#div1').html('Random text');
$('#div1').css({ backgroundColor: "#" + cols1 });

var cols1 = $('#col1')[0].value;
$('#div1').html('Random text');
$('#div1').css({ backgroundColor: "#" + cols1 });

答案 1 :(得分:2)

jQuery对象没有value属性(表示HTML表单控件的DOM元素可以)。 jQuery对象有a val() method

答案 2 :(得分:1)

  1. 昆汀是对的。
  2. JS不是PHP,您必须使用$('#div1').css({ backgroundColor: '#'+cols1 });而不是"#cols1"