Question

我正在进行表单验证。当表单输入不正确时，我在文本框中添加一个红色边框：

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

然后，这给了我一个2px的红色边框。我想要做的是，如果用户使用正确的值来回到原始边界...

有人可以告诉我如何在javascript中更改边框大小和颜色

Answer 1

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

我提到这个的主要原因是假设您想要更改错误元素边框的颜色。如果您选择自己的方式，则可能需要修改代码中的许多位置。如果您选择我的方式，您只需编辑样式表。

Answer 2

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

Answer 3

您可以尝试

document.getElementById('name').style.borderColor='#e52213';
document.getElementById('name').style.border='solid';

Answer 4

在输入元素中添加 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="";
}

Answer 5

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

只需要更改边框颜色即可。

要更改边框尺寸，请使用element.style.borderWidth = "1px"。

Answer 6

我同意Vicente Plata您应该尝试使用jQuery IMHO是最好的JavaScript库。您可以在CSS文件中创建一个类，然后使用jquery执行以下操作：

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

就是这样，当然你不会担心浏览器的不兼容性，那就是jquery的团队问题：D LOL

Answer 7

如果用户输入的值不正确，请在输入字段中应用1px红色边框：

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

如果用户输入正确的值，请从输入字段中删除边框：

document.getElementById('fName').style.border ="";

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

7 个答案: