JavaScript CSS 变化只是一秒钟？
[英]JavaScript CSS change is only for a second?
问题描述
I have some JavaScript that is supposed to change the display property from none to block.
我有一些 JavaScript 应该将显示属性从无更改为阻止。 What happens is it flashes on the screen then goes away in half a second.发生的情况是它在屏幕上闪烁，然后在半秒内消失。
<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';
}
3 个解决方案
解决方案1
2 2011-06-13 04:58:45
Changing the style display via javascript should stick unless something else is happening after it that changes it back.通过 javascript 更改样式显示应该坚持，除非在它更改回来之后发生其他事情。 For example, try this code in a new html file:例如，在新的 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>
It'll make a red box appear after you click the button.单击按钮后，它将出现一个红色框。 What's likely happening is there's another event tied to your button click that's happening after your check() function, so it displays, and then hides immediately after.可能发生的情况是在您的 check() function 之后发生与您的按钮单击相关的另一个事件，因此它会显示，然后立即隐藏。
解决方案2
1 2011-06-13 04:54:46
The reason the flashing occurs is because you most likely have a conflict between your CSS and your JavaScript (or another JavaScript function being called that is hiding the content). The reason the flashing occurs is because you most likely have a conflict between your CSS and your JavaScript (or another JavaScript function being called that is hiding the content).
Also, the style.display property may not work properly in all browsers.此外，style.display 属性可能无法在所有浏览器中正常工作。 I suggest the following:我建议如下：
errorFields.style.display = "block";
errorFields.setAttribute("style","display:block");
I also suggest using a tool like Firebug to inspect the elements and see what other CSS is being applied to your element so you can detect the conflict.我还建议使用像 Firebug 这样的工具来检查元素并查看其他 CSS 正在应用于您的元素，以便您可以检测到冲突。
解决方案3
1 已采纳 2011-06-13 07:53:47
This is what is probably happening:这可能是正在发生的事情：
- Image clicked已点击图片
- Styles changed Styles 改变
- Form submitted提交的表格
- Page reloaded with original styles页面重装原厂styles
You need to return false from the event handler to cancel the normal operation of the image map if you don't want the form to submit.如果您不想提交表单，则需要从事件处理程序中返回 false 以取消图像 map 的正常操作。
onclick="return check(this.form)"
function check(form){
var errorFields = document.getElementById('errorFields');
errorFields.style.display = 'block';
return false;
}
You would probably be better off using unobtrusive JS and replacing the image map's click event with the form's submit event though.不过，使用不显眼的 JS并将图像映射的单击事件替换为表单的提交事件可能会更好。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.