使用javascript更改文本框边框颜色

changing textbox border colour using javascript

本文关键字：边框 颜色 文本 javascript 使用      更新时间：2023-09-26

我正在做表单验证。当表单输入不正确时，我在文本框中添加红色边框:

document.getElementById("fName").style.borderColor="#FF0000"

然后给我一个2px的红色边框。我想做的是，如果用户输入正确的值返回到原始边界。

谁能告诉我如何在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="";
}

document.getElementById("fName").style.borderColor="";

是你需要改变边框颜色的全部。

要更改边框大小，使用element.style.borderWidth = "1px"

我同意Vicente Plata的观点，你应该尝试使用jQuery, IMHO是最好的javascript库。您可以在CSS文件中创建一个类，只需使用jquery执行以下操作:

$('#fName').addClass('name_of_the_class');

，这就是全部，当然你不会担心浏览器不兼容，这是jquery的团队问题:D LOL

如果用户输入的值不正确，则在输入字段上应用1px的红色边框:

document.getElementById('fName').style.border ="1px solid red";

如果用户输入了正确的值，则删除输入字段的边框:

document.getElementById('fName').style.border ="";
相关文章：