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

Question

This is the code i am trying to get to work, i could not work out why JQ will not pick up the #cols1 var from the inputbox. 这是我试图开始工作的代码，我无法弄清楚为什么JQ不会从输入框中提取＃cols1变量。

This is a basic example of the code i am using. 这是我正在使用的代码的基本示例。

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

If anyone know's why, it would be great cheers. 如果有人知道为什么，那就太好了。

Answer 1

Do it like this 像这样做

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

or 要么

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

Answer 2

jQuery objects do not have a value property (DOM elements representing HTML form controls do). jQuery对象没有value属性（表示HTML表单控件的DOM元素却没有）。 jQuery objects have a val() method . jQuery对象具有val()方法。

Answer 3

Quentin is right. 昆汀是对的。
JS is not PHP, you have to use $('#div1').css({ backgroundColor: '#'+cols1 }); JS不是PHP，您必须使用$('#div1').css({ backgroundColor: '#'+cols1 }); instead of "#cols1" . 而不是"#cols1" 。

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

问题描述

3 个解决方案

解决方案1
4 已采纳 2014-10-26 22:46:19

解决方案2
2 2014-10-26 22:44:40

解决方案3
1 2014-10-26 22:50:12

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

问题描述

3 个解决方案

解决方案1 4 已采纳 2014-10-26 22:46:19

解决方案2 2 2014-10-26 22:44:40

解决方案3 1 2014-10-26 22:50:12

解决方案1
4 已采纳 2014-10-26 22:46:19

解决方案2
2 2014-10-26 22:44:40

解决方案3
1 2014-10-26 22:50:12