установить ширину div с помощью JavaScript onDomReady

Question

Я использую mootools 1.2 на странице, где я загружаю граф js в div, который сам находится в ячейке таблицы. График загружается правильно, но он намного меньше ширины ячейки (сценарий графа предназначен для генерации графа того же размера, что и div).

Мой вопрос таков: как вы можете динамически (вместо установки фиксированной ширины пикселя для div) установить размер div на основе размера его родительского контейнера.

Я бы хотел установить размер div с помощью mootools setStyle на domready, вот так (все обернуто в блок domready):

var divwidth    = $('my_chart').offsetParent.offsetWidth;
var divheight   = $('my_chart').offsetParent.offsetHeight;
$('my_chart').setStyle('width', divwidth);
$('my_chart').setStyle('height', divheight);

g           = new Dygraph($('my_chart'), data);

Когда я запускаю страницу без setStyle, она работает, но div возвращает ширину 480, когда я выполняю $('my_chart').getStyle('width'); с консоли js. Однако $('my_chart').offsetParent.offsetWidth с той же консоли возвращает 1100.

Проблема в том, что когда я пытаюсь установить размер div с помощью приведенного выше кода, он выдает ошибку: Uncaught TypeError: Cannot read property 'offsetWidth' of null Я предполагаю, потому что div еще не нарисован?

Изменить, чтобы добавить: если я установлю ширину div my_chart на «auto», я получу ошибку Uncaught TypeError: Cannot read property 'length' of undefined из скрипта графа.

Спасибо за любую помощь.

Answer 1

http://jsfiddle.net/dimitar/c7GTA/

jsfiddle прямо на вас.

проблема в том, что этот инструмент использует холст.и это вроде, если нужно установить ширину холста на заданное значение.

var c = document.id("mychart");
c.setStyle("width", c.getParent().getSize().x);

new Dygraph(document.id("mychart"),
"Date,Temperature\n" + "2008-05-07,75\n" + "2008-05-08,70\n" + "2008-05-09,80\n"
);

это работает нормально, но при изменении размера таблицы это будет выглядеть странно.используйте .getSize (), которая возвращает объект со свойствами x и y для ширины и высоты.не доверяйте вычислениям, основанным на CSS / стиле.