динамически меняет класс css с помощью js

У меня проблема при попытке динамического изменения класса стилей таблицы с использованием JavaScript.динамически меняет класс css с помощью js

Следующая проблема возникает в FF, я открыл страницу и в других браузерах, и она отлично работала.

У меня есть html-страница, содержащая таблицу 4x4. Я хотел бы, когда я нажимаю на ячейку, чтобы увеличить ее, и когда я нажму на нее снова, чтобы уменьшить ее. Я определил 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

К сожалению, «позиция» не работает на ячейках таблицы. Вы можете попробовать разместить div внутри ячейки таблицы и позиционировать это.

Edit: Нечто подобное должно сделать трюк:

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

Убедитесь в том, div является первой вещью в td и он будет расположен в левом верхнем углу td «s. Возможно, вам придется играть с относительным позиционированием на td, если вам нужно изменить верхнее и левое значения дальше.

источник

2009-12-10 10:33:19

Можете ли вы рассказать мне, какие будут изменения в css? – fmoga

Что-то вроде этого должно сделать трюк: td.normalClass div {display: none; } td.zoomClass div {display: block; позиция: абсолютная; ширина: 320 пикселей; высота: 240 пикселей; }. Возможно, вам придется играть с относительным позиционированием на td, если вам нужно изменить верхнее и левое значения div. –

Это как вкладка les work. Возможно, я попытался бы сделать то же самое, используя divs, и тогда вы сможете справиться с проблемой, используя позицию: абсолютный, чтобы расширенный div наложил остальные. Это может работать одинаково для ячейки таблицы.

источник

2009-12-10 10:20:11 matpol

Вы предлагаете заменить td на divs? – fmoga

Вы можете поместить div внутри каждой ячейки и показать/скрыть это, когда вы сделаете объект масштабирования. –

Несколько комментариев к вашему коду, если можно. Я бы сохранил макет в файле CSS, а не в HTML, поэтому я удалю все из них align = "right" и valign = "top". Кроме того, вы можете более эффективно ссылаться на ячейки в своей таблице. Тогда вам не нужно будет устанавливать класс для каждой ячейки.

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

Я также сохранил бы все поведение страницы в отдельном файле сценария (Javascript). Таким образом, больше нет onclick = "zoom (x)" в каждой ячейке. Для этого вы можете использовать привязку событий.

Кроме того, если вы используете привязку к событиям, вы можете просто «прочитать» идентификатор ячейки с щелчком, поэтому вам не нужно передавать это значение статически при вызове функции масштабирования.

Наконец-то: я очень рекомендую использовать jQuery для выполнения такого рода манипуляций с DOM, так как это намного проще, код короче и читабельнее, а ваши скрипты работают в браузерах в значительной степени из коробки.

У меня нет решения для этой конкретной проблемы, но с помощью jQuery довольно просто вставить новый элемент DOM, например, div, с содержимым ячейки с щелчком, поплавать по таблице и имитировать эффект масштабирования , Этот div будет абсолютно позиционируемым и может быть намного лучше, чем ячейка, на которую пользователь нажал.

источник

2009-12-10 11:09:56

динамически меняет класс css с помощью js

ответ

Смежные вопросы