我在尝试使用 JavaScript 动态更改表格单元格的样式类时遇到问题。
在FF上出现如下问题，我在其他浏览器上也打开了该页面，一切正常。
我有一个包含 4x4 表格的 html 页面。我想当我点击一个单元格时，将其放大，当我再次点击它时将其缩小。我定义了 2 个 CSS 类，一个用于正常大小的单元格，一个用于缩放的单元格。单击单元格时，我正在使用 JS 更改 CSS 类。
FF 的问题是，当从 zoomClass 更改为 normalClass 时，单击单元格右侧的所有单元格都向右移动...
我找不到解决此问题的方法或解决方法，如果有人有任何想法，请在此处发布。
接下来，我会附上html、css和js文件。
谢谢:)
util.js
function zoom(id) {
if (document.getElementById(id).className == "zoomClass") {
document.getElementById(id).className = "normalClass";
} else {
document.getElementById(id).className="zoomClass";
}
}
日历.css
table, td, th, tr {
border-color:#D2D3D4;
border-style:solid;
border-width:2px;
}
#main_table {
border-spacing:1px;
height:450px;
margin-left:auto;
margin-right:auto;
position:relative;
top:30px;
width:850px;
}
td.normalClass {
padding:0;
font-size:4px;
color:#3333FF;
}
td.zoomClass {
display:inline;
position:absolute;
width:320px;
height:240px;
z-index:100;
font-size:18px;
}
test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/calendar.css" media="screen" />
<script type="text/javascript" src="js/util.js"></script>
</head>
<body>
<div>
<div>
<table id="main_table">
<tr>
<td id="1" onclick="zoom(1)" align="right" valign="top" class="normalClass"></td>
<td id="2" onclick="zoom(2)" align="right" valign="top" class="normalClass"></td>
<td id="3" onclick="zoom(3)" align="right" valign="top" class="normalClass"></td>
<td id="4" onclick="zoom(4)" align="right" valign="top" class="normalClass"></td>
</tr>
<tr>
<td id="6" onclick="zoom(6)" align="right" valign="top" class="normalClass"></td>
<td id="7" onclick="zoom(7)" align="right" valign="top" class="normalClass"></td>
<td id="8" onclick="zoom(8)" align="right" valign="top" class="normalClass"></td>
<td id="9" onclick="zoom(9)" align="right" valign="top" class="normalClass"></td>
</tr>
<tr>
<td id="10" onclick="zoom(10)" align="right" valign="top" class="normalClass"></td>
<td id="11" onclick="zoom(11)" align="right" valign="top" class="normalClass"></td>
<td id="12" onclick="zoom(12)" align="right" valign="top" class="normalClass"></td>
<td id="13" onclick="zoom(13)" align="right" valign="top" class="normalClass"></td>
</tr>
<tr>
<td id="14" onclick="zoom(14)" align="right" valign="top" class="normalClass"></td>
<td id="15" onclick="zoom(15)" align="right" valign="top" class="normalClass"></td>
<td id="16" onclick="zoom(16)" align="right" valign="top" class="normalClass"></td>
<td id="17" onclick="zoom(17)" align="right" valign="top" class="normalClass"></td>
</tr>
</table>
</div>
</body>
</html>
最佳答案
不幸的是，“位置”不适用于表格单元格。您可以尝试在表格单元格内放置一个 div 并对其进行定位。
编辑:像这样的东西应该可以解决问题:
td.normalClass div {
display: none;
}
td.zoomClass div {
display: block;
position: absolute;
width: 320px;
height: 240px;
}
确保 div 是 td 中的第一个元素，并且它将位于 td 的左上角。如果您需要进一步更改 top 和 left 值，您可能需要在 td 上使用相对定位。
关于javascript - 使用js动态更改css类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1880017/