jQuery で width を３方法で取得し、ブラウザ間での違いを見てみた。

jQuery java script

jQuery で td の width を取得する際に詰まったのでメモ・・・。
友人にjQueryの内部まで読み解いてもらったりして、かなり苦労した・・・。


jQuery で width を取得する場合。

〜.css("width");
〜.attr("width");
〜.width();

などの方法がある。


ほとんどの場合、どれを使ってもいいんだろうけど、例えば、

<td width="100" id="test"> "ここに『aaaaaaaaaaaaaaaaaaaaaa』などの長い英単語が入った場合" </td>

のような場合。。
長い英単語には改行が入らず、td の width が動的に（この表現が正確かはわからない・・・。ようは td 間に入ってくる英単語の長さに依存して）伸びていく。

このときに、伸びた動的な値をとりたかったのだが、その取り方がわからずに苦労した。。。

結果

  • 1:parseInt($(#test).attr("width"))
  • 2:parseInt($(#test).width())
  • 3:parseInt($(#test).css("width"))

上記のようなパターンを試した場合
※動的にtdが伸びて200pxになった場合・・・。

firefoxの場合

1:cssの値 (100)
2:動的な値 (200)
3:動的な値 (200)

IEの場合

1:cssの値 (100)
2:動的な値 (200)
3:cssの値 (100)


一応これでできた。


でも、本当にちゃんとやりたかったら、jQuery 内に独自に関数追加した方が正確なんだろうなー。