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

我在做表单验证。当表单输入不正确，我添加了一个红色边框的文本框：使用javascript更改文本框边框颜色

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

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

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

来源

2011-04-25 kevin

-1

您可以使用jQuery和：

Change border-bottom color using jquery?

来源

2011-04-25 20:27:28

jQuery的根本需要在这里。 – 2011-04-25 20:28:25

Downvoted，因为不必要的使用jQuery – Luca 2018-01-10 12:33:21

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

是所有你需要改变边框的颜色了。

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

来源

2011-04-25 20:28:16

雅，但它给了我一个2px边框...我想要一个1px边框如果可能的话 – kevin 2011-04-25 20:30:09

@kevin：看我的编辑。 – 2011-04-25 20:31:42

与CSS类，而不是

CSS

.error { 
    border:2px solid red; 
}

现在，在JavaScript中使用CSS样式

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

我提到这是假设的主要理由要改变错误元素边框的颜色。如果你选择自己的方式，你可能需要修改许多地方的代码。如果你选择我的方式，你可以简单地编辑样式表。

来源

2011-04-25 20:30:27

评论来自[Savas Vedova]（http://stackoverflow.com/users/1075534/savas-vedova）（拒绝编辑）：'classname'无效。它是'className'。 – Anne 2011-12-04 22:35:27

这个班每次都有。 – Hunsu 2014-07-13 12:40:57

在CSS中保留样式做得非常好。 – tazboy 2015-03-05 19:39:08

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

来源

2011-04-25 20:31:02

我同意维森特普拉塔你应该尝试使用jQuery恕我直言是最好的JavaScript库。您可以在CSS文件中创建一个类，只是做与jQuery如下：

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

，这一切，当然，你会不会担心浏览器的不兼容，这是jQuery的团队问题：d LOL

来源

2011-04-25 20:33:18 PachinSV

的平变化事件添加到您的输入元素：

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

来源

2011-04-25 20:34:38 BumbleB2na

您可以尝试

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

来源

2012-11-15 07:01:43 CEN

请尝试用文字回答，而不是用代码回答。既然你这么晚回答，你的答案与其他答案有什么不同呢？ – Artemix 2012-11-15 07:20:54

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

回答

相关问题