我在页面中使用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设置div宽度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/6296562/