Question

我有一些JavaScript应该将display属性从none更改为block。发生的事情是它在屏幕上闪烁然后在半秒内消失。

<input type="image" src="images/joinButton.jpg" name="join" value="Join" onclick="check(this.form)" />

function check(form){
        var errorFields = document.getElementById('errorFields');
        errorFields.style.display = 'block';
}

Answer 1

通过javascript更改样式显示应该坚持，除非发生其他事情后发生更改。例如，在新的html文件中尝试此代码：

<html>
<head>
<script type="text/javascript">
function check(){
    var errorFields = document.getElementById('errorFields');
    errorFields.style.display = 'block';
}
</script>
</head>
<body>
<div id="errorFields" style="border: 1px solid red; height: 300px; width: 300px; display: none;"></div>
<input type="button" name="join" value="Join" onclick="check()" />
</body>
</html>

点击按钮后会出现一个红框。可能发生的事情是在check（）函数之后发生的另一个事件与你的按钮点击有关，所以它会显示，然后立即隐藏。

Answer 2

闪烁发生的原因是因为你很可能在你的CSS和你正在调用的隐藏内容的JavaScript函数之间存在冲突。

此外，style.display属性可能无法在所有浏览器中正常运行。我建议如下：

errorFields.style.display = "block";
errorFields.setAttribute("style","display:block");

我还建议使用像Firebug这样的工具来检查元素并查看其他CSS应用于您的元素，以便您可以检测到冲突。

Answer 3

这可能是发生的事情：

点击图片
样式已更改
提交表格
页面重新加载了原始样式

如果您不希望提交表单，则需要从事件处理程序返回false以取消图像映射的正常操作。

onclick="return check(this.form)"


function check(form){
    var errorFields = document.getElementById('errorFields');
    errorFields.style.display = 'block';
    return false;
}

使用unobtrusive JS并使用表单的提交事件替换图像映射的click事件可能会更好。

JavaScript CSS更改只有一秒钟？

3 个答案: