JavaScript CSS更改只是一秒钟？

我有一些JavaScript应该将display属性从none更改为block。它会在屏幕上闪烁，然后在半秒内消失。JavaScript CSS更改只是一秒钟？

<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'; 
}

来源

2011-06-13 Robert

'input'标签由'button'标签关闭了吗？此外，这个问题太模糊了。你能再详细一点吗？ – naveen 2011-06-13 04:50:58

它可能会干扰其他事件，也许你可以检查你的浏览器的开发工具。 – LeleDumbo 2011-06-13 04:53:53

Robert - 你可以像@naveen指出的那样编辑和清理你的HTML吗？你在混合不属于一起的HTML元素，比如输入和按钮。这真的是你的HTML在你的页面上看起来如此吗？或者这只是一个错误的问题？谢谢！ – jmort253 2011-06-13 05:23:27

这是很可能发生的事情：

图片点击
样式改变
表单提交
页面与原来的风格

你需要从返回false重新加载如果您不希望表单提交，则可以取消图像映射的正常操作。

onclick="return check(this.form)" 


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

你可能会更好使用unobtrusive JS与表单的提交事件取代影像地图的点击事件虽然。

来源

2011-06-13 07:53:47 Quentin

出现闪烁的原因是因为你极有可能（另一个JavaScript函数被称为是隐藏内容或）你的CSS和JavaScript中之间的冲突。

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

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

我也建议使用类似Firebug的工具来检查元素和看到的是被应用到你的元素是什么其他的CSS，所以你可以检测到冲突。

来源

2011-06-13 04:54:46 jmort253

这是我目前在页面上唯一的javascript，但怎么会有CSS与JavaScript冲突？ – Robert 2011-06-13 07:24:06

@Robert - 如果HEAD中存在适用于该元素的CSS规则，并且该CSS在* JavaScript运行后应用*，则可能导致冲突。检查你的CSS，并确保你没有一个显示规则：没有附加到你的元素。还有其他一些属性可能会导致元素隐藏，并且具有类似的根本原因。此外，请检查Firebug并检查elemnent以查看是否有显示：您的元素或任何可能表明存在冲突的显示:)祝您好运！ – jmort253 2011-06-13 21:58:36

通过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（）函数后发生的按钮单击有关，因此它会显示，然后立即隐藏。

来源

2011-06-13 04:58:45 two13

JavaScript CSS更改只是一秒钟？

回答

相关问题