- ベストアンサー
テーブル幅を自動で画像幅にする方法
- 以下のjavascriptコードで、画像幅を取得し、テーブル幅を設定する方法をまとめました。
- 幅が設定されない場合には、imgWight関数の中で画像のパスを正確に指定しているかを確認してください。
- もし正確に指定しているにも関わらず幅が設定されない場合には、他の要素やスタイルシートが幅の設定を上書きしている可能性があります。
- hatokamome
- お礼率44% (246/554)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
とりあえずこんな感じでOK。 ━ ココから ━━━━━━━━━━━━━━━━━━━━━━━━ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>TEST</title> <script type="text/javascript"><!-- window.onload = function(){ var my_img = new Image(); my_img.src = 'sample.jpg'; var img_w = my_img.width; var img_h = my_img.height; var table = document.getElementById('my_table'); table.style.height = img_h +'px'; table.style.width = img_w +'px'; }; //--></script> </head> <body> <table id="my_table"> <tr> <td><img src="sample.jpg"></td> </tr> </table> </body> </html> ━ ココまで ━━━━━━━━━━━━━━━━━━━━━━━━ ～そちらの仕様に合わせて、適宜書き換えて使ってみて下さい。一応、ChromeとIE8で動作確認済みです。 ポイントは、 ・window.onload = function(){～}; を使って、確実にページが読み込まれてからJavaScriptが動き出す様にする。 ・document.getElementById() を使ってtableタグの要素を取得し、書き換える。 ～てな所でしょうか？特に画像のプロパティ関連は、ブラウザの種類に関わらず、基本的には完全にロードが終わってからでないと情報無し（＝0）と判定されてしまいます。 またページ内のHTMLタグの要素（背景色や幅など）をJavaScriptで変更する場合。事前にHTML作成時に個別のID名を割り振って置くのが基本です。というかそうして置かないと、後から要素を弄る事は事実上不可能…（まあ出来るけど無駄に複雑な処理になる）。 P.S. 厳密にはダイレクトにtableの幅を弄るのではなく。スタイルシートを変更しています。何かChromeだと、幅はOKでも高さはスタイルシートじゃないと変更出来なかったので…。
お礼
お返事遅れすみませんでした。 こんなことが出来るなんで驚きました。 興味がわいたので、勉強したくなりました。 ありがとうございます。