Question

我正在尝试让文本字段改变颜色，但它似乎不起作用这是代码：

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

谢谢

Answer 1

这是一个语法错误。您不能在JavaScript中使用CSS语法（background-color: red）。

您希望实际将值（字符串"red"）分配给名为style的{{1}}对象的成员：

backgroundColor

Answer 2

试试这个：

document.getElementById("text1").style.backgroundColor = "red";

演示：http://jsfiddle.net/jG95a/

您的代码中存在四个问题：

getElementById()中的拼写错误（您有“y”而不是“t”）
background-color在JS点表示法中无效，您需要backgroundColor
您需要=而不是:
red必须是字符串"red"

或者以另一种方式放置最后三个点，background-color:red的方式适用于样式表，但不适用于JavaScript。

Answer 3

如果使用Jquery使用CSS（）。如果是普通的Javascript

document.getElementById("text1").style.backgroundColor = "red";

或

document.getElementById("text1").style("backgroundColor":"red");

“getElementById”错误中有一个错误

Answer 4

1）从JavaScript访问的大多数CSS属性需要替换所有“ - ”并使用rpn样式，即。

background-color变为backgroundColor，

border-collapse变为borderCollapse，依此类推。

2）在JavaScript中操作样式时，可能经常需要一次更新多个属性。一个优雅而优雅的方法是使用JavaScript“with”语句：

with(document.getElementById("text1").style) {
    backgroundColor = 'red' ;
    fontWeight = 'bold' ;
    // etc... 
}

3）jQuery方式也很简单：

$('#text1').css({
    "background-color": "red", 
    "font-weight": "bold"
}) ;

http://api.jquery.com/css/

Answer 5

   <form action="" method="post" onsubmit="return ColorsByLength();" onchange="return ColorsByLength();">
           <div class="input-wrapper">
               <input type="text" placeholder="Write Text" id="firstname" name="name"/>
           </div>        
   <a href="#" onclick="ColorsByLength()"></a> //use in script tags


        function ColorsByLength(){ 
           var fn=document.getElementById('firstname'); //or className
           var fnVal = fn.value;
           if(fnVal.length == 1){
               document.getElementById('firstname').style.borderColor = "red";
           }else if(fnVal.length == 2){
               document.getElementById('firstname').style.borderColor = "green";
           }else{
               document.getElementById('firstname').style.borderColor = "blue";
          }
       }

尝试使用JavaScript更改文本字段颜色

5 个答案: