我在页面中使用mootools 1.2,将js图加载到本身在表格单元格中的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内容的页面时,它可以工作,但是当我从js控制台执行$('my_chart').getStyle('width');时,div返回的宽度为480。但是,来自同一控制台的$('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

谢谢你的帮助。

最佳答案

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 /样式的计算。

关于javascript - 通过javascript onDomReady设置di​​v宽度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/6296562/

10-10 14:18
查看更多