删除以前设置的边框颜色

Question

null

function validate() {
	var username = document.getElementById("username").value;
	var password = document.getElementById("password").value;

	if (username == "") {

		document.getElementById("message").innerHTML = "USERNAME CANNOT BE EMPTY";
		document.getElementById("username").style.borderColor = "red";
		return false;
	}
	if (password == "") {


		document.getElementById("message").innerHTML = "PASSWORD CANNOT BE EMPTY";
		document.getElementById("password").style.borderColor = "red";
		return false;
	}
}

#username:focus {
	background-color: yellow;
	border-color: green;
}

#password:focus {
	background-color: yellow;
	border-color: green;
}

#message {
	color: red;
}

html prettyprint-override"><form onsubmit=" return validate()">
    LOGIN:-
    <br>
    <input id="username" type="text" name="username" placeholder="USERNAME">
    <br>
    <input id="password" type="password" name="password" placeholder="PASSWORD">
    <br>
    <input type="submit" value="SUBMIT">
    <p id="message">
</form>

null

• 当我关注文本字段时，背景和边框颜色分别变为黄色和绿色（通过css）。
• 如果单击submit而不输入任何内容，边框颜色将变为红色（通过javascript）。
• 但当我再次将焦点放在文本字段时，红色边框颜色并没有消失，而是同时出现绿色和红色边框。

我只希望它是绿色的。你能不能也解释一下这种行为的原因。

Answer 1

之所以发生这种情况，是因为您更新了元素样式，而不是css类属性。元素样式对于css具有最高权重。相反，在错误时动态添加一个错误类，并在表单字段有效时删除它。

根据文档，样式的递减顺序将是。

1. 内联样式（HTML元素内部）
2. 外部和内部样式表（在标题部分）
3. 浏览器默认值

下面是一个工作示例

null

function validate() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;

    if (username == "") {
        document.getElementById("message").innerHTML = "USERNAME CANNOT BE EMPTY";
        document.getElementById("username").classList.add("invalidInput");
        return false;
    } else {
        document.getElementById("username").classList.remove("invalidInput")
    }
    if (password == "") {
        document.getElementById("message").innerHTML = "PASSWORD CANNOT BE EMPTY";
        document.getElementById("password").classList.add("invalidInput")
        return false;
    } else {
        document.getElementById("password").classList.remove("invalidInput")
    }
}

#username:focus {
    background-color: yellow;
    border-color: green;
}

#password:focus {
    background-color: yellow;
    border-color: green;
}

.invalidInput {
    border-color: red; 
}

#message {
    color: red;
}

<form onsubmit=" return validate()">
    LOGIN:-
    <br />
    <input id="username" type="text" name="username" placeholder="USERNAME" />
    <br />
    <input id="password" type="password" name="password" placeholder="PASSWORD" />
    <br />
    <input type="submit" value="SUBMIT" />
    <p id="message"></p>
</form>