通過 javascript onDomReady 設置 div 寬度

Question

我在一個頁面中使用 mootools 1.2，我將一個 js 圖加載到一個 div 中，該 div 本身就在一個表格單元格中。 圖形加載正確，但它比單元格的寬度小很多（圖形腳本旨在生成與 div 大小相同的圖形）。

我的問題是：如何根據父容器的大小動態設置 div 的大小（而不是設置 div 的固定像素寬度）。

我想在 domready 上使用 mootools setStyle 設置 div 的大小，如下所示（全部包裹在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 內容的情況下運行頁面時，它可以工作，但是當我執行$('my_chart').getStyle('width'); 從 js 控制台。 但是，來自同一控制台的$('my_chart').offsetParent.offsetWidth返回 1100。

問題是，當我嘗試使用上面的代碼設置 div 大小時，它會引發錯誤： Uncaught TypeError: Cannot read property 'offsetWidth' of null我假設是因為 div 尚未繪制？

編輯添加：如果我將 my_chart div 的寬度設置為“auto”，則會收到錯誤Uncaught TypeError: Cannot read property 'length' of undefined from the graph script。

謝謝你的幫助。

Answer 1

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

jsfiddle 回到你身邊。

問題是這個工具使用了 canvas。 如果需要將 canvas 寬度設置為設定值，則很好。

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"
);

這工作正常，但表格調整大小會使它看起來很奇怪。 use.getSize() 返回一個 object ，其寬度和高度的 x 和 y 屬性。 不要相信基於 css/style 的計算。