我正在尝试让文本字段改变颜色,但它似乎不起作用 这是代码:
<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>
答案 0 :(得分:4)
这是一个语法错误。您不能在JavaScript中使用CSS语法(background-color: red
)。
您希望实际将值(字符串"red"
)分配给名为style
的{{1}}对象的成员:
backgroundColor
答案 1 :(得分:2)
试试这个:
document.getElementById("text1").style.backgroundColor = "red";
您的代码中存在四个问题:
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"
}) ;
答案 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";
}
}