Нужна помощь в настройке div в высоту таблицы с использованием Javascript - PullRequest
Новая
       0

Нужна помощь в настройке div в высоту таблицы с использованием Javascript

1 голос
/ 16 февраля 2012

Я пытаюсь установить div на определенную высоту внутри пустой ячейки таблицы, чтобы установить для ячейки высоту 100%.(Вся страница состоит только из таблицы без отступов.)

Вот соответствующий код: 

<table border="0" width="100%">
 <tr>
  <td class="boxmiddleleft"></td>
  <td class="boxmiddlecenter"><script language="javascript" src="includes/clock.js">/*clock*/</script></td>
 </tr>
 <tr>
  <td class="boxbottomleft"><script language="javascript" src="includes/windowsize.js"></script><div id="divbottomresize"></div></td>
  <td class="boxbottomcenter"><button type="button" onclick="resizeheight();">Changed the window height? Reset by pressing this button.</button></td>
 </tr>
</table>

(когда div im пытается изменить высоту, называемую '#divbottomresize')

И JavaScript, который я использую для этого: 

var element = "divbottomresize";
function resizeheight(element) {
 var height = 0;
 var body = window.document.body;
 if (window.innerHeight) {
  height = window.innerHeight;
 } else if (body.parentElement.clientHeight) {
  height = body.parentElement.clientHeight;
 } else if (body && body.clientHeight) {
  height = body.clientHeight;
 }
 element.style.height =   ((height - element.offsetTop) + "px");
}

Если вы знаете, что я делаю неправильно, пожалуйста, не могли бы вы мне сказать.Кроме того, если вы найдете другой код, который делает то, что я хочу, не стесняйтесь вставить или связать меня.(Я не хочу использовать jQuery, если это возможно.)

Когда я запускаю код в Chrome и захожу в «Проверка элемента», я получаю сообщение об ошибке:

windowsize.js:12Uncaught TypeError: Невозможно прочитать свойство 'style' из undefined в строке element.style.height = ((height - element.offsetTop) + "px");

РЕДАКТИРОВАТЬ: я изменил var element = "divbottomresize"; до var element = document.getElementById("divbottomresize");, как кто-то услужливо предложил.Это все еще не работает, и я получаю ту же ошибку и без изменения высоты.

1 Ответ

2 голосов
/ 16 февраля 2012

Для функции изменения размера требуется параметр элемента, поэтому нам нужно обновить HTML: 

 <td class="boxbottomcenter"><button type="button" onclick="resizeheight('divbottomresize');">Changed the window height? Reset by pressing this button.</button></td>

Теперь нам нужно изменить Javascript, чтобы использовать значение STRING, переданное функцией, а затем получитьпометка с этим идентификатором для дальнейшей обработки: 

function resizeheight(id_element) {
 var div = document.getElementById(id_element);

 var height = 0;
 var body = window.document.body;
 if (window.innerHeight) {
  height = window.innerHeight;
 } else if (body.parentElement.clientHeight) {
  height = body.parentElement.clientHeight;
 } else if (body && body.clientHeight) {
  height = body.clientHeight;
 }
 div.style.height =   ((height - div.offsetTop) + "px");
}
...