通过 javascript onDomReady 设置 div 宽度答案

【问题标题】：set div width via javascript onDomReady通过 javascript onDomReady 设置 div 宽度
【发布时间】：2011-06-10 05:47:37
【问题描述】：

我在一个页面中使用 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 的情况下运行页面时，它可以工作，但是当我从 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 的宽度设置为“自动”，我会从图形脚本中收到错误 Uncaught TypeError: Cannot read property 'length' of undefined。

感谢您的帮助。

【问题讨论】：

这是页面的 jsfiddle：jsfiddle.net/vYe5J/7

标签： javascript html mootools

【解决方案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/style 的计算。

【讨论】：