javascript - 使用 javascript 修改 css 在屏幕上快速闪烁然后返回到原始 (help)

Question

有点难以解释，但就是这样，我用 javascript 更改了一些 css，当我在我的网络浏览器中运行它时，它出现，然后迅速消失回到原来的 css。换句话说，我从 javascript 更改的 css 值不会保留!

CSS:

#login_temp{
width: 350px;
height:150px;
background: rgba(255, 255, 255, 0.1);
position: absolute;
top: 50%;
left: 50%;
margin-left: -175px;
margin-top: -150px;
border-radius: 2px;
box-shadow: 0px 30px 40px -25px rgba(0, 0, 0, 1);

HTML:

 <input type="submit" name="submit" id="submit" onclick = dog(); value="Login" />

JavaScript:

function dog(){
document.getElementById("login_temp").style.background = "black";
}

Answer 1

您为输入元素提供了一种“提交”类型，因此当您单击该按钮时，它会调用 dog() 函数，然后执行提交操作。如果您没有设置 wrap form 元素的 action 属性，则默认情况下页面将自行重新加载。

您可以只删除 type='submit' 来防止这种情况发生，或者您可以使用 event.preventDefault() 来避免默认操作发生。