• 締切済み

javascriptでtdのサイズを取得するには？

javascriptで、tableのあるtdタグの高さ（height）を 取得したいのですが、どうやればいいですか？ 例： <table><tr> <td id="tdtest">aaaa</td> <td >bbb</td></tr>・・・ とあった場合に、onLoadイベントで document.getElementById("tdtest").heightで やったのですが、エラーではなく空でした。 教えてください、お願いします。

みんなの回答

  • leap_day
  • ベストアンサー率60% (338/561)
回答No.2

こんにちは <script type="text/javascript"><!-- window.onload=function() { h = document.getElementById("tdtest").clientHeight; document.getElementById("result").innerHTML = h; } //--></script> <div id="result"></div> <table><tr> <td id="tdtest">aaaa</td> <td >bbb</td></tr></table> ってことですか？

suucha
質問者

補足

clientHeightではダメでした。 このプロパティではpaddingを含んで「３」がかえって きたりしてました。 やはりheightプロパティを指定しないと拾えない ようです。 ありがとうございました。

  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.1

そういうのは直接じゃなくstyleの情報からじゃないと取り出せないんじゃない？ http://www.tohoho-web.com/js/style.htm

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • Divの幅指定を無視して子テーブルの幅に合わせて全体が伸びてしまいます

    はじめて投稿します。 下のHTMLを表示したとき、menuの部分が狭くなった上に画面自体のスクロールバーが出て横に広がってしまいます。 赤色のテーブルをウィンドウいっぱいに広げた状態で、オレンジ色のテーブルを囲むDIVタグを赤色のテーブルの80%にしたいのです。 オレンジ色テーブルのwidthの80%になっているとか？ でも、オレンジ色のテーブルのwidthがウィンドウに収まるような値なら、意図する表示になるのですが・・・。 どう直したらいいのでしょうか。 <html> <script> function hoge(){ document.getElementById("s1").innerText = "t1=" + document.getElementById("t1").offsetWidth + "*" + document.getElementById("t1").offsetHeight + ",d1=" + document.getElementById("d1").offsetWidth + "*" + document.getElementById("d1").offsetHeight + ",t2=" + document.getElementById("t2").offsetWidth + "*" + document.getElementById("t2").offsetHeight + ",d2=" + document.getElementById("d2").offsetWidth + "*" + document.getElementById("d2").offsetHeight + ",t3=" + document.getElementById("t3").offsetWidth + "*" + document.getElementById("t3").offsetHeight; } </script> <body onload="hoge()"> <span id="s1"></span> <table width="100%" height="95%" border="1" style="background-color:red;" id="t1"> <tr> <td valign="top" width="200px">menu</td> <td valign="top"> <div style="background-color:yellow" id="d1"> <table border="1" style="background-color:blue" width="90%" height="100%" id="t2"> <tr><td>hoge1</td></tr> <tr><td>hoge2</td></tr> <tr> <td> <div style="background-color:pink;overflow:auto;height:80%;width:80%" id="d2"> <table id="t3" width="3250" height="500" style="background-color:orange"> <tr> <td>hoge3</td> </tr> </table> </div> </td> </tr> </table> </div> </td> </tr> </table> </body> </html>

  • JavaScriptを入れるとｔdタグ内の高さが広がる

    CSSにて高さ指定もしてあるのですが、JavaScriptの記載あるtdタグの高さがIEだと広がってしまいます。 この現象はFireFoxだと現れません。 下記コードですと3段目と4段目のtdの高さが他の段に比べ広がってしまいます。 何か解決策とうございましたら、教えてください。 -----------JavaScript関数----------- <script language="javascript"> function goNext() { 　if (confirm("確認")) { 　　return true; 　} else { 　　return false; 　} } </script> -----------html----------- <table id="tablea"> <tr><td class="b"><img src="img.jpg"/></td></tr> <tr><td>&nbsp;</td></tr> <tr><td class="b"><form action="5_4modify1_pla.html" onsubmit="return goNext();"><input name="bb" type="image" src="img.jpg" width="150" height="30"/></form></td></tr> <tr><td class="b"><form action="5_4modify1_pla.html" onsubmit="return goNext();"><input name="bb" type="image" src="img.jpg" width="150" height="30"/></form></td></tr> 　<tr><td class="b"><img src="img.jpg"/></td></tr> </table> -----------CSS----------- .b {height: 30px;} #tablea { width: 180px; height: 200px;} ----------------------

    • ベストアンサー
    • HTML
  • JavaScriptについて

    下記のJavaScriptでウィンドウサイズを取得し、 その値に応じてTableサイズを変化させるhtmlを作成したいのですが、 どうすれば良いですか？ ※下のスクリプトから???部分に値を入れたい。 <table width=??? height=??? border=1> <tr><td></tr></td> </table> //ウィンドウサイズを取得する function getWindowSize() { var sW,sH,s; sW = window.innerWidth; sH = window.innerHeight; s = "横幅 = " + sW + " / 高さ = " + sH; document.getElementById("WinSize").innerHTML = s; } </script>

  • JavaScriptの読み込み順

    下記コードを実行すると、プルダウンメニューに値が入る前にボタンがクリックされてしまいます。 どのようなコードを書けば正常に動作するのでしょうか。 ■html内 <html> <head> <title>SCT</title> <script type="text/javascript"> onload = function() { var d = new Date() ; d.setTime((new Date).getTime()) ; newOption = document.createElement('option') ; newOption.value = newOption.innerHTML = d.getFullYear()-1 ; document.getElementById('year').appendChild(newOption) ; newOption = document.createElement('option') ; newOption.value = newOption.innerHTML = d.getMonth()+1 ; document.getElementById('month').appendChild(newOption) ; newOption = document.createElement('option') ; newOption.value = newOption.innerHTML = d.getDate() ; document.getElementById('day').appendChild(newOption) ; } </script> <script type="text/javascript" language="JavaScript" src="./file.js"> </script> </head> <form NAME="Myfm" method="post" action="☆☆URL☆☆"> <body onLoad="yobi()"> <table border="0"> <tr> <td> <select name="startyear" id="year"> </select> </td> <td>年</td> <td> <select name="startmonth" id="month"> </select> </td> <td>月</td> <td> <select name="startday" id="day"> </select> </td> <td>日</td> </tr> <tr> <td> <select name="endyear"> <option value=201>2011 </select> </td> <td>年</td> <td> <select name="endmonth"> <option value=8>8 </select> </td> <td>月</td> <td> <select name="endday"> <option value=1>1 </select> </td> <td>日</td> </tr> <tr> <td><input type="submit" value="集計" NAME="mybut"> </td> </tr> </table> </body> </form> </html> ■file.js内 function yobi(){ document.Myfm.submit(); }

  • スタイルシートの背景色の取得

    あるセルから他のセルへスタイルシートの背景色をコピーしたいのですが、下記のように実行すると無色となってしまいます。 どなたかご教授いただけませんでしょうか。 因みにコピーにしなければならないのは、元のセルの色も動的に変わるという理由です。 <head> <style> td.a{ background:blue; width:25; height:15; } td.b{ background:green; width:25; height:15; } </style> <script type="text/javascript"> function s(b){ document.getElementById('ia').style.background=b.style.background; //document.getElementById('ia').style.background="red"; } </script> </head> <body> <table Cellspacing="1"> <td id="ia" class="a"></td> </table> <table Cellspacing="1"> <tr> <td id="ib" class="b" onmousedown="s(this)"></td> </tr> </table> </body>

  • JavaScriptで特定のtdタグにclass名をつけたい

    指定のdiv内にある一行目（もしくは、最初の3つ）のtdタグに対して JavaScriptでClass名を付けたいのですが、どのようにすればよいでしょうか？ 【HTML参考】 <div id="box"> <table> <tr> <td>セル１</td> <td>セル２</td> <td>セル３</td> </tr> <tr> <td>セル４</td> <td>セル５</td> <td>セル６</td> </tr> </table> </div> 上記のような時、div#box内の「セル１～３」に対してclass名を付けたいと言った場合です。 よろしくお願いいたします。

  • 一気に「テーブルの2列目のtdタグを右詰にする

    <html> <head> <title>test</title> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td>bbb</td></tr> <tr><td>2</td><td>ccc</td></tr> </table> </body> </html> このようなテーブルで 右側の2列目のtdタグを右詰にしたいのですが、 一気に「テーブルの2列目のtdタグを右詰にする」と言う方法は有りますか? 今は <html> <head> <title>test</title> <style type="text/css"> td.example1 { text-align: right; } </style> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td class="example1">bbb</td></tr> <tr><td>2</td><td class="example1">ccc</td></tr> </table> </body> </html> このようにしていますが 一つ一つタグを付けるのは非効率的と思っています。

    • ベストアンサー
    • HTML
  • javascriptの変数の渡し方

    ラジオボタンで選択した値によって表示するテーブルを変えるフォームを作っています。 AAAは入力ボックスが1つ BBBは入力ボックスが2つ 同じphpへ送信して、入力ボックスへデータは入るのですが、javascriptの値を渡すことが出来ません。 BBBでsubmit後、BBBの入力ボックスを表示することは出来ますでしょうか。 <? echo "<form method=post action=?>"; echo "<input type=radio name='user' onclick='change_user(this.value)' uid='user' value=1"; if($user==1){ echo " checked"; } echo ">AAA"; echo "<input type=radio name='user' onclick='change_user(this.value)' uid='user' value=2"; if($user==2){ echo " checked"; } echo ">BBB"; echo "<br>"; echo "<span id=inner>"; echo "<table>"; echo "<tr>"; echo "<td>AAAのフォーム</td>"; echo "<td><input name=form1 type=text value=$form1></td>"; echo "</tr>"; echo "</table>"; echo "</span>"; echo "<span id=outer>"; echo "<table>"; echo "<tr>"; echo "<td>BBBのフォーム</td>"; echo "<td><input name=form1 type=text value=$form1></td>"; echo "<td><input name=form2 type=text value=$form2></td>"; echo "</tr>"; echo "</table>"; echo "</span>"; echo "<br>"; echo "<input type=submit value=submit>"; echo "</form>"; ?> <script language='javascript'> var inner = document.getElementById('inner'); var outer = document.getElementById('outer'); function change_user (uid) { if (uid == '2') { inner.style.display = 'none'; outer.style.display = ''; } else { inner.style.display = ''; outer.style.display = 'none'; } } change_user(document.getElementById('user').value); </script>

    • ベストアンサー
    • PHP
  • 指定した要素を含んだテキストで取得する

    <table> 　<tr id="aaa"><td>あああ</td></tr> 　<tr><td>いいい</td></tr> </table> <script> alert(document.getElementById("aaa").innerHTML) </script> 上記のようなHTMLを実行すると 「<td>あああ</td>」と表示されますが これをid指定されている<tr>要素を含んだ形で 即ち「<tr id="aaa"><td>あああ</td></tr>」というように 取得するにはどのような方法が考えられるでしょうか？

  • これってJavaScriptですか？？

    以下のソースはJavaScriptになりますか？ HPを（初心者ながら）作っているのですが JavaScriptを使うとパソコンのブラウザなどによっては違うように見えると聞きました。 以下のソースがJavaScriptなら、どのへんがどんな風に違って見えるのでしょうか？ <table cellspacing="0" cellpadding="0" style="width:250px;font-size:13px;color:#000"><tbody><tr style="text-align:center"><td style="border-width:1px 1px 0 1px;border-style:solid;border-color:#000"><div style="background:#ffcccc;border-bottom:1px solid #ffcccc;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME1" onclick="document.getElementById('NAME4').style.backgroundColor='#ffcccc';document.getElementById('NAME1').style.borderColor='#ffcccc';document.getElementById('NAME2').style.borderColor='#000000';document.getElementById('NAME3').style.borderColor='#000000';document.getElementById('NAME4').innerHTML=document.getElementById('NAME11').innerHTML"> タブ１ </div></td><td style="border-width:1px 1px 0 0;border-style:solid;border-color:#000"> <div style="background:#ff6699;border-bottom:1px solid #000;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME2" onclick="document.getElementById('NAME4').style.backgroundColor='#ff6699';document.getElementById('NAME1').style.borderColor='#000000';document.getElementById('NAME2').style.borderColor='#ff6699';document.getElementById('NAME3').style.borderColor='#000000';document.getElementById('NAME4').innerHTML=document.getElementById('NAME22').innerHTML"> タブ２ </div></td><td style="border-width:1px 1px 0 0;border-style:solid;border-color:#000"> <div style="background:#ffeeee;border-bottom:1px solid #000;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME3" onclick="document.getElementById('NAME4').style.backgroundColor='#ffeeee';document.getElementById('NAME1').style.borderColor='#000000';document.getElementById('NAME2').style.borderColor='#000000';document.getElementById('NAME3').style.borderColor='#ffeeee';document.getElementById('NAME4').innerHTML=document.getElementById('NAME33').innerHTML"> タブ３ </div></td><td style="width:100%;border-bottom:1px solid #000">&nbsp;</td></tr><tr><td colspan="4"><div style="border-width:0 1px 1px 1px;border-style:solid;border-color:#000;background:#ffcccc;padding:10px;height:130px" id="NAME4"> ここにタブ１の文章 </div></td></tr></tbody></table> <div style="display:none" id="NAME11"> ここにもタブ１の文章 </div><div style="display:none" id="NAME22"> ここにタブ２の文章 </div><div style="display:none" id="NAME33"> ここにタブ３の文章 </div>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する