JavaScript CSS更改只需一秒钟？_Javascript_Html_Css

JavaScript CSS更改只需一秒钟？

javascript html css

JavaScript CSS更改只需一秒钟？,javascript,html,css,Javascript,Html,Css,我有一些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('errorFie

我有一些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';
}


功能检查（表格）{
var errorFields=document.getElementById（'errorFields'）；
errorFields.style.display='block'；
}

发生闪烁的原因是CSS和JavaScript（或另一个正在调用的隐藏内容的JavaScript函数）之间很可能存在冲突

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

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

我还建议使用像Firebug这样的工具来检查元素，看看还有什么其他CSS应用到了您的元素上，这样您就可以检测到冲突。

通过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>


函数检查（）{
var errorFields=document.getElementById（'errorFields'）；
errorFields.style.display='block'；
}

单击按钮后，它将显示一个红色框。可能发生的情况是，在check（）函数之后发生了另一个与按钮单击相关的事件，因此它会显示，然后立即隐藏。

这就是可能发生的情况：

点击图像

风格改变了

提交的表格

重新加载原始样式的页面

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

onclick="return check(this.form)"


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

您最好使用图像映射的单击事件并将其替换为表单的提交事件。

input

标记由

按钮关闭

标记？另外，这个问题太模糊了。你能再详细一点吗？它可能会干扰其他事件，也许你可以检查你浏览器的开发工具。罗伯特-你能像@naveen所指出的那样编辑和清理你的HTML吗？您正在混合不属于一起的HTML元素，如输入和按钮。这真的是你的HTML在你的页面上的样子吗？还是这只是问题中的一个输入错误？谢谢哇，我真不敢相信我做了那件事。这实际上就是它在页面上的样子。现在已经修复了，但问题是sameI see

getElementById（'errorFields'）

这是我当前页面上唯一的javascript，但是css如何与javascript冲突？@Robert-如果您的头脑中有一个css规则适用于该元素，并且css在javascript运行后应用，这可能导致冲突。检查CSS，确保没有显示的规则：元素没有附加任何显示。还有其他可能导致元素隐藏的属性，它们也有类似的根本原因。此外，检查Firebug并检查elements，以查看是否有显示：元素上没有显示或任何可能指示冲突的内容：）祝您好运！