使用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更改文本框邊框顏色

回答

相關問題