我正在进行表单验证。当表单输入不正确时,我会在文本框周围添加红色边框:
document.getElementById("fName").style.borderColor="#FF0000"
这会给我一个2像素的红色边框。我想要做的是,如果用户输入了正确的值,则返回原来的边框...
有人能告诉我如何在Javascript中更改边框大小和颜色吗?
我正在进行表单验证。当表单输入不正确时,我会在文本框周围添加红色边框:
document.getElementById("fName").style.borderColor="#FF0000"
这会给我一个2像素的红色边框。我想要做的是,如果用户输入了正确的值,则返回原来的边框...
有人能告诉我如何在Javascript中更改边框大小和颜色吗?
使用CSS类别来应用CSS样式
CSS
.error {
border:2px solid red;
}
现在使用Javascript
document.getElementById("fName").className = document.getElementById("fName").className + " error"; // this adds the error class
document.getElementById("fName").className = document.getElementById("fName").className.replace(" error", ""); // this removes the error class
我提到这个主要原因是,假设你想要改变出错元素的边框颜色。如果你选择你的方法,你可能需要修改代码中的许多地方。如果你选择我的方法,你只需要编辑样式表。
document.getElementById("fName").style.border="1px solid black";
document.getElementById('name').style.borderColor='#e52213';
document.getElementById('name').style.border='solid';
给你的输入框添加一个onchange事件:
<input type="text" id="fName" value="" onchange="fName_Changed(this)" />
Javascript:
function fName_Changed(fName)
{
fName.style.borderColor = (fName.value != 'correct text') ? "#FF0000"; : fName.style.borderColor="";
}
我同意Vicente Plata的观点,你应该尝试使用jQuery,它是最好的javascript库。你可以在CSS文件中创建一个类,并使用jQuery进行以下操作:
$('#fName').addClass('name_of_the_class');
这就是全部内容了,当然您不必担心浏览器的不兼容性,那是jQuery团队的问题:D LOL
document.getElementById("fName").style.borderColor="";
这是你需要的来改变边框颜色的代码。
如果要改变边框大小,请使用element.style.borderWidth = "1px"
。
document.getElementById('fName').style.border ="1px solid red";
document.getElementById('fName').style.border ="";
classname
不是有效的。应该改为className
。 - Anne