Javascript 使用javascript更改文本框边框颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5782857/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
changing textbox border colour using javascript
提问by kevin
I'm doing form validation. when the form input is incorrect i add a red border to the textbox:
我正在做表单验证。当表单输入不正确时，我向文本框添加一个红色边框：
document.getElementById("fName").style.borderColor="#FF0000"
this then gives me a 2px red border. what i want to do is if the user putas in a correct value to go back to the original border...
这然后给了我一个 2px 的红色边框。我想要做的是，如果用户输入正确的值以返回原始边界...
can someone tell me how i change the border size and colour in javascript
有人可以告诉我如何在 javascript 中更改边框大小和颜色
回答by John Hartsock
Use CSS styles with CSS Classes instead
将 CSS 样式与 CSS 类一起使用
CSS
CSS
.error {
border:2px solid red;
}
Now in Javascript
现在在 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
The main reason I mention this is suppose you want to change the color of the errored element's border. If you choose your way you will may need to modify many places in code. If you choose my way you can simply edit the style sheet.
我提到这一点的主要原因是假设您想更改错误元素边框的颜色。如果您选择自己的方式，您可能需要修改代码中的许多地方。如果您选择我的方式，您可以简单地编辑样式表。
回答by josh.trow
document.getElementById("fName").style.border="1px solid black";
回答by CEN
You may try
你可以试试
document.getElementById('name').style.borderColor='#e52213';
document.getElementById('name').style.border='solid';
回答by BumbleB2na
Add an onchangeevent to your input element:
将onchange事件添加到您的输入元素：
<input type="text" id="fName" value="" onchange="fName_Changed(this)" />
Javascript:
Javascript：
function fName_Changed(fName)
{
fName.style.borderColor = (fName.value != 'correct text') ? "#FF0000"; : fName.style.borderColor="";
}
回答by PachinSV
I'm agree with Vicente Plata you should try using jQuery IMHO is the best javascript library. You can create a class in your CSS file and just do the following with jquery:
我同意 Vicente Plata 你应该尝试使用 jQuery 恕我直言是最好的 javascript 库。您可以在 CSS 文件中创建一个类，然后使用 jquery 执行以下操作：
$('#fName').addClass('name_of_the_class');
and that's all, and of course you won't be worried about incompatibility of the browsers, that's jquery's team problem :D LOL
就是这样，当然你不会担心浏览器的不兼容，这是 jquery 的团队问题：D LOL
回答by Matt Ball
document.getElementById("fName").style.borderColor="";
document.getElementById("fName").style.borderColor="";
is all you need to change the border color back.
您只需要将边框颜色改回来即可。
To change the border size, use element.style.borderWidth = "1px".
要更改边框大小，请使用element.style.borderWidth = "1px"。
回答by Nandu Hulsure
If the users enter an incorrect value, apply a 1px red color border to the input field:
如果用户输入了错误的值，请在输入字段中应用 1px 的红色边框：
document.getElementById('fName').style.border ="1px solid red";
If the user enters a correct value, remove the border from the input field:
如果用户输入了正确的值，则从输入字段中移除边框：
document.getElementById('fName').style.border ="";
