element.clientWidth が ゼロになる

久しぶりにミクロな話題。

IE6 で clientWidth が期待通りの値にならず困ってます。

// alertなし
function getWidth(element) {
  var w = element.clientWidth;
  return w;
}

// alertあり
function getWidthWithAlert(element) {
  alert("wait");
  var w = element.clientWidth;
  return w;
}

var elm = document.body.appendChild(document.createElement('canvas'));
elm.width = 300;
elm.height = 150;
getWidth(); // w = 0
// getWidthWithAlert(); // w = 300

getWidthWithAlert() なら、clientWidth = 300 となるのですが、同じスレッド内(?)で呼んでしまうと、clientWidth(clientHeightも)が設定されていないようで、0が返ってきます。
一回 alert を表示させてからなら、OK なようなので、リフローを伴う場合に再計算される値なのかもしれません。

後方互換モードのことも考え、margin, padding, border が含まれていない clientXxx から値を取りたかったのですが、うーむ。
elm.zoom = 1; とかやって hasLayout を強制すれば上手くいくのかもしれません(後で試してみる)

結局違う方法でとることにしたので、clientWidth は使わない方向に。