使用js動態更改css類

我在嘗試使用JavaScript動態更改表格單元的樣式類時遇到問題。使用js動態更改css類

以下問題發生在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"; 

    } 

}

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>

來源

2009-12-10 fmoga

你有一個現場的例子嗎？ – Udders 2009-12-10 10:16:37

不幸的是，「位置」不適用於表格單元格。你可以嘗試把一個div放在表格單元格中並定位它。

編輯：像這樣的東西應該做的伎倆：

td.normalClass div { 
    display: none; 
} 
td.zoomClass div { 
    display: block; 
    position: absolute; 
    width: 320px; 
    height: 240px; 
}

確保div在td的第一件事，它就會被定位在td的左上角。如果需要進一步更改頂部和左側值，則可能需要使用td上的相對定位進行播放。

來源

2009-12-10 10:33:19

你能告訴我在css上會發生什麼變化嗎？ – fmoga 2009-12-10 10:50:03

像這樣的事情應該做的伎倆：td.normalClass div {display：none; } td.zoomClass div {display：block;位置：絕對; width：320px; height：240px; }。如果需要更改div的頂部和左側值，您可能需要在td上進行相對定位。 – 2009-12-10 11:32:23

這是怎麼了標籤工作。我可能會嘗試使用div來做同樣的事情，然後你應該能夠使用position：absolute來處理這個問題，所以展開的div會覆蓋其他的。這對錶格單元格可以起到同樣的作用。

來源

2009-12-10 10:20:11 matpol

你是否打算用div替換td？ – fmoga 2009-12-10 10:31:03

您可以在每個單元格內放置一個div，並在執行縮放操作時顯示/隱藏該div。 – 2009-12-10 10:35:36

對你的代碼的一些評論，如果我可以。我會將佈局保留在CSS文件中而不是HTML中，因此我會刪除所有這些align =「right」和valign =「top」。此外，您可以更有效地引用表格中的單元格。那麼你將不必爲每個單元格設置類。

#main_table td{ 
    padding:0; 
    font-size:4px; 
    color:#3333FF; 
}

我還將頁面的所有行爲都保存在單獨的腳本文件（Javascript）中。所以在每個單元格上不再需要onclick =「zoom（x）」。你可以使用事件綁定來做到這一點。另外，如果使用事件綁定，則可以「讀取」單擊單元格的ID，因此您無需在縮放函數的調用中靜態傳遞該值。

最後：我強烈推薦使用jQuery來完成這種DOM操作，因爲它更容易，代碼更短，可讀性更強，並且腳本幾乎可以跨瀏覽器使用。

我沒有針對這個特定問題的解決方案，但是使用jQuery很容易插入一個新的DOM元素，例如一個div，單擊單元格的內容，浮動在表格上並模擬縮放效果。該div將是絕對可定位的，並且可以比用戶點擊的單元格更好。

來源

2009-12-10 11:09:56

使用js動態更改css類

回答

相關問題