Javascript 不遵守 Firefox 中的样式更改
为了简化它,我有以下代码突出显示了我的确切问题:
<!DOCTYPE html><html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script>
function updateR1(){
if (c1.checked){
r1.style.visibility='hidden';
}
else{
r1.style.visibility='visible';
}
}
function updateR2(){
if (c2.checked){
r2.style.display='none';
}
else{
r2.style.display='table-row';
}
}
</script>
</head>
<body>
<table>
<tr id="r1">
<td>visibility</td>
</tr>
<tr id="r2">
<td>display</td>
</tr>
</table>
<div>
<input id="c1" type=checkbox onchange="return updateR1();">Hide row 1</input>
<input id="c2" type=checkbox onchange="return updateR2();">Hide row 2</input>
</div>
</body>
</html>
工作示例> http://s .supuhstar.operaunite.com/s/content/testHideShow.htm
在 Opera、Chrome、IE 和 Safari 中,第一个复选框使顶行可见或不可见,第二个复选框使第二行压缩/不可见或扩展/可见。然而,在 Firefox 中,这些都不起作用。为什么不呢?我尝试过很多变体,包括在 onchange 属性中编写原始脚本以及使用其他事件属性,但它始终适用于除 Firefox 之外的所有内容。
To dumb it down, I have the following code highlighting my exact problem:
<!DOCTYPE html><html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script>
function updateR1(){
if (c1.checked){
r1.style.visibility='hidden';
}
else{
r1.style.visibility='visible';
}
}
function updateR2(){
if (c2.checked){
r2.style.display='none';
}
else{
r2.style.display='table-row';
}
}
</script>
</head>
<body>
<table>
<tr id="r1">
<td>visibility</td>
</tr>
<tr id="r2">
<td>display</td>
</tr>
</table>
<div>
<input id="c1" type=checkbox onchange="return updateR1();">Hide row 1</input>
<input id="c2" type=checkbox onchange="return updateR2();">Hide row 2</input>
</div>
</body>
</html>
Working example > http://s.supuhstar.operaunite.com/s/content/testHideShow.htm
In Opera, Chrome, IE, and Safari, the first checkbox makes the top row visible or invisible, and the second checkbox makes the second row compressed/invisible or extended/visible. However, in Firefox, neither of these work. Why not? I've tried many variations of this, including writing the raw script in the onchange
attribute and using other event attributes, but it always works on everything BUT Firefox.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我很惊讶它可以在其他浏览器上运行...但是 Firefox 没有出于正确的原因执行你的 JS...这是错误的。你的 JS 函数应该是这样的:
顺便说一句,使用 Firebug for firefox....你的生活将是天堂;)
I am surprised that it's working on other browsers...but firefox is not executing your JS for the right reasons...it's wrong. Here is how you JS functions should be:
BTW, use Firebug for firefox....your life will be heaven ;)
在 Firefox 中,您需要执行以下操作:
如果您可以使用 jQuery,它会提供与浏览器无关的方式来管理可见性(以及几乎所有其他内容):
http://api.jquery.com/show/
http://api.jquery.com/hide/
In Firefox you'd need to do something like:
If you can use jQuery for this it provides browser agnostic ways to manage visibility (and pretty much everything else) :
http://api.jquery.com/show/
http://api.jquery.com/hide/