尝试使用 JavaScript 更改文本字段颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18673500/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trying to change text field color using JavaScript
提问by javaLovah
I'm trying to make the text field change its color but it doesn't seem to work Here is the code:
我正在尝试使文本字段更改其颜色，但它似乎不起作用这是代码：
<html>
<head>
<title>
This is a title
</title>
<script type="text/javascript">
function changeColor()
{
alert("bla")
document.getElemenyById("text1").style.background-color:red;
}
</script>
</head>
<body>
<form>
<input id="text1" type="text" onkeypress="changeColor()">
</form>
</body>
</html>
- thank you
- 谢谢
回答by meagar
That's a syntax error. You can't use CSS syntax (background-color: red) inside JavaScript.
那是语法错误。您不能background-color: red在 JavaScript 中使用 CSS 语法 ( )。
You want to actually assign a value (the string "red") to a member of the styleobject called backgroundColor:
您希望实际"red"为style名为的对象成员分配一个值（字符串）backgroundColor：
...style.backgroundColor = "red";
回答by Alice Stewert
If using Jquery use CSS() . If Plain Javascript
如果使用 Jquery，请使用 CSS() 。如果纯 Javascript
document.getElementById("text1").style.backgroundColor = "red";
or
或者
document.getElementById("text1").style("backgroundColor":"red");
One error is in "getElementById" typo
一个错误是“getElementById”错字
回答by Samuel-L-29
1) most of CSS attributes accessed from JavaScript need to replace all "-" and use rpn style, ie.
1) 大部分从 JavaScript 访问的 CSS 属性需要全部替换“-”并使用 rpn 样式，即。
background-color becomes backgroundColor,
背景色变成背景色，
border-collapse becomes borderCollapse and so on.
border-collapse 变成了 borderCollapse 等等。
2) When manipulating styles in JavaScript one may often need to update multiple attributes at once. A good and elegant method is to use the JavaScript "with" statement :
2) 在 JavaScript 中操作样式时，可能经常需要一次更新多个属性。一个好的和优雅的方法是使用 JavaScript 的“with”语句：
with(document.getElementById("text1").style) {
backgroundColor = 'red' ;
fontWeight = 'bold' ;
// etc...
}
3) the jQuery way is also simple :
3）jQuery方式也很简单：
$('#text1').css({
"background-color": "red",
"font-weight": "bold"
}) ;
回答by nnnnnn
Try this:
试试这个：
document.getElementById("text1").style.backgroundColor = "red";
Demo: http://jsfiddle.net/jG95a/
演示：http: //jsfiddle.net/jG95a/
There were four problems in your code:
您的代码中有四个问题：
- A typo in
getElementById()(you had a "y" instead of a "t") background-coloris not valid in JS dot notation, you needbackgroundColor- You need
=not: redneeds to be a string,"red"
- 输入错误
getElementById()（您输入的是“y”而不是“t”） background-color在 JS 点符号中无效，您需要backgroundColor- 你需要
=不: red必须是一个字符串，"red"
Or to put those last three points another way, the way you had background-color:redis appropriate in a stylesheet, but not in JavaScript.
或者换一种方式说最后三点，您的方式background-color:red适用于样式表，但不适用于 JavaScript。
