Fatal编程技术网
  • javascript/
  • Javascript 使用js动态更改css类

Javascript 使用js动态更改css类

javascript html css

Javascript 使用js动态更改css类,javascript,html,css,zooming,Javascript,Html,Css,Zooming,我在尝试使用JavaScript动态更改表单元格的样式类时遇到问题 下面的问题发生在FF上，我也在其他浏览器上打开了该页面，效果很好 我有一个包含4x4表的html页面。我想当我点击一个单元格时，放大它，当我再次点击它时，缩小它。我定义了两个CSS类，一个用于正常大小的单元格，另一个用于缩放的单元格。我使用JS在单击单元格时更改CSS类 FF的问题是，当从zoomClass更改为normalClass时，单击单元格右侧的所有单元格都会向右移动 我找不到解决这个问题的方法，如果有人有任何想法，请在

我在尝试使用JavaScript动态更改表单元格的样式类时遇到问题

下面的问题发生在FF上，我也在其他浏览器上打开了该页面，效果很好

我有一个包含4x4表的html页面。我想当我点击一个单元格时，放大它，当我再次点击它时，缩小它。我定义了两个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";

    }

}


calendar.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做同样的事情，然后您应该能够使用position:absolute处理问题，这样扩展的div将覆盖其他div。这可能对表格单元格也适用。

不幸的是，“位置”对表格单元格不起作用。您可以尝试在表格单元格中放置一个div并定位它

编辑：类似这样的操作应该可以：

td.normalClass div { 
    display: none; 
} 
td.zoomClass div { 
    display: block; 
    position: absolute; 
    width: 320px; 
    height: 240px; 
}
确保
div
是
td
中的第一件事，并且它将位于
td
的左上角。如果需要进一步更改顶部和左侧的值，您可能需要在
td
上进行相对定位。

如果可以的话，请对代码进行一些注释。我会将布局保留在CSS文件中，而不是HTML中，因此我会删除所有这些align=“right”和valign=“top”。此外，可以更有效地引用表中的单元格。这样就不必为每个单元格设置类

#main_table td{
    padding:0;
    font-size:4px;
    color:#3333FF;
}
我还将把页面的所有行为保存在一个单独的脚本文件（Javascript）中。因此，不再在每个单元格中单击onclick=“zoom（x）”。您可以使用事件绑定来实现这一点

此外，如果使用事件绑定，则只需“读取”已单击单元格的id，因此不必在调用zoom函数时静态传递该值

最后：我强烈建议使用jQuery来进行这种DOM操作，因为它更简单，代码更短，可读性更强，而且脚本在浏览器之间的工作非常方便

我没有解决这个特定问题的方法，但是使用jQuery可以很容易地插入一个新的DOM元素，例如一个div，它包含单击的单元格的内容，在表上浮动并模拟缩放效果。该div将是绝对可定位的，并且可以比用户单击的单元格的样式好得多。

您是否建议将td替换为div？您可以在每个单元格中放置一个div，并在执行缩放操作时显示/隐藏该div。您能告诉我css上的更改是什么吗？类似这样的操作应该可以做到：td.normalClass div{display:none；}td.zoomClass div{display:block；位置：绝对；宽度：320px；高度：240px；}。如果需要更改div的顶部和左侧值，则可能需要在td上使用相对定位。