通過javascript設置div寬度onDomReady

我在一個頁面中使用mootools 1.2，在這裏我將一個js圖形加載到一個本身位於表格單元格中的div中。圖形加載正確，但比單元格的寬度小得多（圖形腳本的目的是生成與div大小相同的圖形）。通過javascript設置div寬度onDomReady

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

我想設定的mootools的div尺寸的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從js控制檯執行$('my_chart').getStyle('width');時返回寬度480。然而，從同一控制檯$('my_chart').offsetParent.offsetWidth返回1100

的問題是，當我嘗試使用上面的代碼來設置DIV的大小，它拋出一個錯誤： Uncaught TypeError: Cannot read property 'offsetWidth' of null我假設，因爲股利尚未得出？

編輯添加：如果我將my_chart div的寬度設置爲「auto」，則會從圖形腳本中收到錯誤Uncaught TypeError: Cannot read property 'length' of undefined。

感謝您的任何幫助。

來源

2011-06-09 julio

這裏是一個jsfiddle的頁面：http://jsfiddle.net/vYe5J/7/ – julio 2011-06-09 21:00:19

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/style的計算。

來源

2011-06-09 21:47:37

謝謝Dimitar--清楚的答案和有用的jsfiddle！ – julio 2011-06-09 22:48:49

通過javascript設置div寬度onDomReady

回答

相關問題