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

时间:2013-09-07 12:53:39

标签: javascript

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

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

5 个答案:

答案 0 :(得分:4)

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

您希望实际将值(字符串"red")分配给名为style的{​​{1}}对象的成员:

backgroundColor

答案 1 :(得分:2)

试试这个:

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

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

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

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

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

答案 2 :(得分:2)

如果使用Jquery使用CSS()。如果是普通的Javascript

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

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

“getElementById”错误中有一个错误

答案 3 :(得分:2)

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/

答案 4 :(得分:0)

   <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";
          }
       }