javascriptで現在のテーブルの位置を知ることは可能なのでしょうか?また各セルの位置情報も同じく知ることはできるのでしょうか?(幅や高さではなく、絶対位置です) よろしくご指導お願い致します。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

Netscape 4.x の場合ですと、layer タグで括ってレイヤーの left プロパティと


top プロパティで代用するしかないと思います。

<layer id="table1">
<table align="center">
<tr>
<td>あ</td>
<td>い</td>
</tr>
<tr>
<td>う</td>
<td>え</td>
</tr>
</table>
</layer>
<form onsubmit="return false">
<input type="button" onclick="alert( '左 : ' + document.layers[ 'table1' ].left + 'px、上 : ' + document.layers[ 'table1' ].top + 'px' )" value="テーブルの位置を取得">
</form>

しかし、困った事に左位置が期待している値にならないようです。
※ テーブルの横幅は(表示されている幅に関わらず)
「 ウィンドウ幅いっぱい 」-「body 内側のマージン値」となっている模様

更に困った事に、レイヤーは Netscape 6 で廃止されています。

Netscape 6.x の場合ですと、以下のようにすると取得できます。

<table id="table1" align="center">
<tr>
<td>あ</td>
<td>い</td>
</tr>
<tr>
<td>う</td>
<td>え</td>
</tr>
</table>
<form onsubmit="return false">
<input type="button" onclick="alert( '左 : ' + document.getElementById( 'table1' ).offsetLeft + 'px、上 : ' + document.getElementById( 'table1' ).offsetTop + 'px' )" value="テーブルの位置を取得">
</form>

これで取得してもやはり左位置は期待している値にはなりません。
このサンプルは IE 6 でも動作しますが、その場合の左位置は期待した値になりますので、
やはり、Netscape ではテーブルの実際の幅は
「 ウィンドウ幅いっぱい 」-「 body 内側のマージン値 」として扱われているようです。
    • good
    • 0
この回答へのお礼

丁寧な回答ありがとうございました!Netscapeはちょっと違うんですね。他の対応を考えます。

お礼日時:2002/01/17 15:45

左上点の位置でよければ、offsetLeft プロパティで左からの位置が、


offsetTop プロパティで上からの位置が取得できます。

<table id="table1" align="center">
<tr>
<td>あ</td>
<td>い</td>
</tr>
<tr>
<td>う</td>
<td>え</td>
</tr>
</table>
<form onsubmit="return false">
<input type="button" onclick="alert( '左 : ' + document.all[ 'table1' ].offsetLeft + 'px、上 : ' + document.all[ 'table1' ].offsetTop + 'px' )" value="テーブルの位置を取得">
</form>

この回答への補足

ご回答ありがとうございます。補足質問なのですが、Netscape4の場合offsetLeftが使えないのですが、なにか代用のものがあればお教えください。よろしくおねがいします。

補足日時:2002/01/16 08:21
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qテーブル入れ子にしたらNNではダメ?

赤い背景画像を使ったHTMLにテーブルを3個入れ子で載せました。
下のテーブルのセルに白色、中のテーブルのセル色にグレー、一番上のテーブルのセルに白色を指定しました。

そこへラジオボタンをつけたのですが、本来、枠がない丸いボタンのところに赤の枠ができてしまいます。
IEでは問題ないのですが、NN4.7で確認したらこうなっていました。

デザインを変えずに回避する方法があったら教えてください。
また、NN6.*~だったらOKということはありますか?

Aベストアンサー

こんにちは!

<input type="radio" name="address" value="menber" checked style="background-color:#FFFFFF;">

と style="background-color:#FFFFFF;" を追加してください。

NN6は分かりませんが4.7と7で確認しました。

Mac 側は確認していません・・。

Qjavascriptでウィンドウやタグ要素の幅、高さを取得

javascriptでウィンドウやタグ要素の幅、高さを取得したいのですが、
ブラウザによって使うプロパティが異なり、正直混乱してます。
なにかいいまとめのページとかありませんか?
(offsetWidth、clientWidth、scrollLeft、posLeft・・・orz..)

それと、IE6とIE7ではそこらへんのプロパティは違う(IE7は標準になった?)
とかありますか?
教えてください!

Aベストアンサー

たまに利用する程度なので、たいして詳しくはないため、あまり参考にならないかも知れませんが・・・

とりあえずIEに関しては、MSDNの以下のページを参考にいろいろ調べたりしています。(他のブラウザの場合にどうかは確認していません。)
 http://msdn.microsoft.com/ja-jp/library/cc392317.aspx

QNN4.7 テーブルの背景を表示出来ますか?

至急教えて欲しいのですが、ネットスケープ4.7でhtmlを確認中ですが。
テーブルへ背景を埋め込むと表示されないようです。
この現象は、NN4.7では無理なのでしょうか?
どなたか助けてくださいm(_ _)m

Aベストアンサー

NN4.7では <table bgcolor="~"> や <table background="~"> は正式にサポートされています。
(Win. Mac. 共にNN4から正式サポート)

但し、NNの仕様でテーブルの各セル内が背景以外何もない場合は背景が表示されません。

おそらく、背景が表示されていない部分は、文字も画像も入れていないのではありませんか?

そのときには、各空白のセルに相当するソース部位に「&nbsp;」(&は実際には半角です)を記述しておきます。
「&nbsp;」(&は実際には半角です)は、空白を表す特殊な記号で、ブラウザには表示されません。

QJavaScriptで開く別WINDの位置を常に前に位置を指定して開きたい

JavaScriptで開く別WINDの位置を常に前に位置を指定して開きたいのですが、どんなスクリプトを何処に記述すればいいかわかりません。

ソフトは DERAMWERVER を使用して今ビヘイビアで
サイズの指定をしてWINDを開くようにしました。

同じページからそのWINDにLINKが何箇所かあるのですが、最初はそのページが手前に来ますが、後は後ろのままです。

Aベストアンサー

ウィンドウを開くスクリプトに、開いたウィンドウにフォーカスを与える処理を加えればよいと思います。

head内に

<script type="text/javascript"><!--
function winOpen(url){
win1=window.open(url,"window1","width=***, height=***, resizable=1, scrollbars=1");
win1.focus();
}
//--></script>

body内のリンクは

<a href="#" onClick="winOpen('別ウィンドウで開くファイルのURL')">リンク1</a>

上記のようにすれば、リンクをクリックして関数が呼び出されるたびに、内部的にwindow1という名前を付けたウィンドウに引数で指定したURLのファイルを呼び出し(このときwin1というIDを与えています)、次にそのウィンドウにフォーカスが当たるようになると思います。 別のURLを引数に渡した場合、ウィンドウが再利用された上で、そのウィンドウがフォーカスで前面に出てくると思います。

参考になれば…

ウィンドウを開くスクリプトに、開いたウィンドウにフォーカスを与える処理を加えればよいと思います。

head内に

<script type="text/javascript"><!--
function winOpen(url){
win1=window.open(url,"window1","width=***, height=***, resizable=1, scrollbars=1");
win1.focus();
}
//--></script>

body内のリンクは

<a href="#" onClick="winOpen('別ウィンドウで開くファイルのURL')">リンク1</a>

上記のようにすれば、リンクをクリックして関数が呼び出されるたびに、内部的にwindow1...続きを読む

QIE6/NN7.1のテーブルのheight="100%"

テーブルの高さの指定 height="100%" なんですが、
IE6とNN7.1で100%で表示されません。

下記の記述に間違いはありますでしょうか?
もしかしたら初歩的な問題なんでしょうか?


ちなみにIE5.5 MacのIE5.2では表示されました。
困っています。
宜しくお願いいたします。

ーーーーーーーーーーーーーー
<table border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td valign="top">上</td>
</tr>
<tr>
<td valign="bottom">下</td>
</tr>
</table>
ーーーーーーーーーーーーー

Aベストアンサー

HTML4.01の規格(仕様)では、tableに使えるアトリビュートは、summary、align、widthです。
heightが有効になるほうが特殊だと思ったほうがよいとおもいます

QJavaScriptでiframeの高さを自動調節する方法を試しているがうまくいかない

JavaScriptでiframeの高さを自動調節する方法を
下記サイトを参考に試しているのですが、
読み込み先ファイルをphpファイルにするとうまくいきません。

http://www.revulo.com/blog/20070616.html

《参考サイトより example.html》
<head>
......
<script type="text/javascript">
function resizeIframe() {
var iframe = parent.document.getElementById("recent_iframe");
var height = document.documentElement.scrollHeight;
iframe.style.height = height + 10 + "px";
}
</script>
</head>
<body onload="resizeIframe()">
......

上記のようなソースを子HTMLファイルに書いて、親HTMLファイルから

<iframe id="recent_iframe" src="example.html">
</iframe>

というように読み込むと問題なく子ファイルの大きさに
iframeの高さが自動調節されて表示されるのですが、
参考サイトのソースをphpファイルに記載して、
iframeからフルパスで読み込もうとするとうまく高さが調節されません。

<iframe id="recent_iframe" src="フルパス/exsample.php">
</iframe>

解決策はありますか?

JavaScriptでiframeの高さを自動調節する方法を
下記サイトを参考に試しているのですが、
読み込み先ファイルをphpファイルにするとうまくいきません。

http://www.revulo.com/blog/20070616.html

《参考サイトより example.html》
<head>
......
<script type="text/javascript">
function resizeIframe() {
var iframe = parent.document.getElementById("recent_iframe");
var height = document.documentElement.scrollHeight;
iframe.style.height = height + 10 + "px";
}
</script>...続きを読む

Aベストアンサー

あなたがやりたいことって
iframe.style.height = height + iframe.height + "px";
こういうことではないの?

QNNでテーブルの枠線(BORDER)の設定は?

NN6です。
BORDERを使用したいのですが、NNではうまくいきません。
<TABLE>タグにあてはめるとだめだときいたので、TDにあてはめようとしているのですが…。

HEAD内で
TDにBORDER-STYLE="SOLID; BORDER-COLOR:GRAY;"
としました。これをTD CLASS=***
としているのですが、一向に線は出てきません。
どのように直せばいいのでしょうか?

Aベストアンサー

とりあえずダブルクォーテーションは不要なので削除しましょう。

BORDER-STYLE=SOLID; BORDER-COLOR:GRAY;

それでも出なかったらボーダーの太さも明記しておきましょう。

BORDER-STYLE=SOLID; BORDER-COLOR:GRAY;BORDER-WIDTH:1pt;

QJavascriptで各ブラウザを厳密に区別する方法

JsvascriptでIE,FireFox,Safari,Opera,Chromeのそれぞれのブラウザを厳密に区別する方法が知りたいです。

それが困難な場合はIE/FireFoxとその他のブラウザを区別する方法がわかれば構いません。

最近Javascriptを触っていませんが2008年後半から今までで何かJavascriptで変化したことはあるのでしょうか?
2007年はAjaxというものが出てきましたが、その後 目新しいものがあったでしょうか?それとも今は減少中?

Aベストアンサー

think49さんが一番上で挙げられているスクリプトがたぶん一番厳密にブラウザを区別できる方法です。バージョンまで見られますから。

Selectors API はもうすぐ Web 標準です。(仕様の草案が Last Call)
http://www.w3.org/TR/selectors-api/
一般的なブラウザは現在のバージョンか次のバージョンで全部サポートしますし、何より簡単に書けるので、XPath より広く使われるようになると思います。

それから次に各ブラウザの実装が揃っているのが postMessage だと思います。IE 8 でも使えますし。
https://developer.mozil la.org/Ja/DOM/Window.postMessage

その次が DOM Storage です。
http://d.hatena.ne.jp/amachang/20080924/1222239494
http://d.hatena.ne.jp/javascripter/20090424/1240562692

ってこのへんは「2008年後半から今まで」の話ではないですね。ご存じでしたら失礼しました。

think49さんが一番上で挙げられているスクリプトがたぶん一番厳密にブラウザを区別できる方法です。バージョンまで見られますから。

Selectors API はもうすぐ Web 標準です。(仕様の草案が Last Call)
http://www.w3.org/TR/selectors-api/
一般的なブラウザは現在のバージョンか次のバージョンで全部サポートしますし、何より簡単に書けるので、XPath より広く使われるようになると思います。

それから次に各ブラウザの実装が揃っているのが postMessage だと思います。IE 8 でも使えますし。
https://...続きを読む

QIE(5.5)とNN(4.7)のフォントサイズについて。

フォントサイズがデフォルトのままだと、IE(5.5)とNN(4.7)とではフォントサイズが違うのです。
IEの方でフォントサイズを「小」にするとNNと丁度良いサイズになるので、
IEでアクセスしたときには強制的にフォントサイズを「小」に変更することなど出来ませんでしょうか?
CSSで「12px」とかにしたんですけど、やはりIEでサイズが「中」になっていると
微妙にサイズが違ってしまうのです。
また、テーブル内のフォントのサイズも同じように変更したいのでNNに対しては融通が利かないのです。
なにとぞお知恵をお貸しくださいませm(_ _)m

Aベストアンサー

これはJavaScriptとの併用である程度解決つきます。
ブラウザによって使用するCSSファイル(この場合は外部ファイルにします。拡張子『.css』)を用意し、<head>~</head>タグ内にブラウザの判別のスクリプトを書く形です。

IE用とNN用で別々のCSSを用意する事によって、かなり近い状態で表示されるはずです(それでもWindows/Mac、他のバージョンを考えると完全に一致させる事は至難の技ですが・・・)。

JavaScriptでのブラウザ判別については、ここの『JavaScirpt』の方で見つかったので、そのリンクを。

参考URL:http://oshiete1.goo.ne.jp/kotaeru.php3?q=186603

QJavaScriptで、現在表示中ページの内容の幅を取得するには?

JavaScriptで、現在表示中のページの内容の幅をピクセル単位で取得したいのですが、可能でしょうか?

ウインドウの幅ではなく、表示している内容の幅が欲しいのです。

document.body.clientWidth は、表示領域の幅のようでした。
document.body.scrollWidth も、表示領域の幅のようでした。
document.body.offsetWidth は、ウインドウの幅のようでした。

ブラウザのウインドウ幅に追従する「リキッド」なデザインの場合(教えて!gooもそうです)は、ブラウザのウインドウ幅に合わせて変化しますので、その幅が欲しいです。

Yahooのトップページはテーブルで幅を指定してあるようです。そのような場合はウインドウを最大化したりサイズを変えたりしても“内容”は変化しませんので、その幅を取得したいです。

どのようなプロパティにアクセスすれば良いでしょうか。

Aベストアンサー

教えて!gooの場合
<table cellspacing="0" cellpadding="0" width="100%" border="0">

Yahooのトップページの場合
<TABLE cellSpacing=0 cellPadding=2 width=710 bgColor=#eeeeee border=0>

です。

従って、
getElementsByTagName('table')[0].width
の内容を判断し、割合指定であれば
document.body.clientWidth
にその値を積算、定数指定であれば
そのまま値を採用すれば、一応の目的は果たせるかと思います。

ただし・・・
あくまでこの手法では「テーブルで画面整形をしている場合」に限られます。

ごく普通のテーブルで画面整形をしていないサイトであれば、その内部で使っているテーブルの幅が出てきてしましますし、使っていなければ、スクリプトエラーになってしまうでしょう。

さらには幅整形にdivエレメントを使っている場合には、別の手立てが必要になってきますし、
CSSでposition指定して特異な位置へフロートウインドウを表示していた場合には、もはやほとんどお手上げではないかと思います。

このあたり、全てに対処しようとするのなら、ほとんどHTML解析エキスパートシステムになってしまいます。



そもそも、他者の作成したサイトの「有効幅」を得ようという発想自体に問題があるように思われますが?

教えて!gooの場合
<table cellspacing="0" cellpadding="0" width="100%" border="0">

Yahooのトップページの場合
<TABLE cellSpacing=0 cellPadding=2 width=710 bgColor=#eeeeee border=0>

です。

従って、
getElementsByTagName('table')[0].width
の内容を判断し、割合指定であれば
document.body.clientWidth
にその値を積算、定数指定であれば
そのまま値を採用すれば、一応の目的は果たせるかと思います。

ただし・・・
あくまでこの手法では「テーブルで画面整形をしている場合」に...続きを読む


人気Q&Aランキング