WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:オブジェクト内の座標を得るには

ひろ [WriteDate : Thu Jun 7 13:04:20 2001]

こんにちは。
ウインドウ内の座標ではなく、あるオブジェクトの内側の座標を取得したいのですが…。
IEの場合は event.offsetX で良いのですが、N6ではどうすれば良いのでしょうか?

サンプルを途中まで作っています。「???」の所はどう書けば良いのでしょうか?

<html>
<head>
<title>test</title>
<script type="text/JavaScript">
<!--
function func(e){
  if(document.all)
     a=event.offsetX;
  else if(document.getElementById)
                      // ???
  status=a;
}
document.onclick=func
//-->
</script>
</head>
<body>
<div style="position:absolute; top:100px; left:100px">aaaaaaaaaaaaaaaaaaaaa</div>
</body>
</html>

ps
Mozilla0.8では「???」の所にa=e.layerXとやると良いみたいですが、正式版のN6でも大丈夫なんでしょうか? (N6はレイヤー関連は使えなかったのでは…?)ちょっと不安です。

また別のよい方法があれば教えてください。


ween [WriteDate : Thu Jun 7 20:11:33 2001]

> layerX
恐らく互換性のために残してあるんだと思いますが。
position:absolute のときだけ要素内の座標を返し、
そうでないときは clientX と同じ値を返すようですが
それでよいのでしょうか ?

DOM2 的には、ある要素 element の
現在のスタイルのプロパティ propertyName の値は

document.defaultView.getComputedStyle(element,'').getPropertyValue(propertyName);

で求められます。
一般的な要素内の座標が必要な場合ならば
getPropertyValue('left') の値と clientX の差から
margin や border の値を加減すればどうにかなる、かもしれません。
# 画面がスクロールすることを考えるとやっぱりツラいかも。


ひろ [WriteDate : Sun Jun 10 10:35:20 2001]

ありがとうございました。
とりあえずはlayerX を使ってみました。実は要素のドラッグ&ドロップに利用したのですが、うまくいきました。


DOMを使用したものは今後の参考として残しておきます。(もう少し勉強してみます。難しそう^ ^;)

遅れて申し訳ありませんでした。


ma-to [WriteDate : Sun Jun 10 18:17:45 2001]



>DOMを使用したものは今後の参考として残しておきます。
>(もう少し勉強してみます。難しそう^ ^;)

以下の不正なhtml文書が補助になるかもしれません。n6のウィンドウステータスに「true,true」が出ます。仮に後者のtrueがfalseになる場合があれば教えて下さい。

<html><head><title>test</title>
<style type="text/css"><!--
div{margin:10%;border:solid 10px;padding:10%;
position:absolute;left:10%;top:10%;}
--></style><script type="text/javascript"><!--
var div=null;function f(){
document.getElementsByTagName&&
(div=document.getElementsByTagName('div')[0])&&
//navigator.userAgent.match(/Gecko/)&&
//innerHeight&&
div&&
document.defaultView&&
(defaultStatus=document.defaultView==window)&&
window.getComputedStyle&&
(defaultStatus+=','+(parseFloat(
getComputedStyle(div,null).
getPropertyValue('left'))==
div.offsetLeft));}
onload=f;//--></script></head><body><h1>html test</h1>
<div><p>aaaaa</p><p>aaa</p><p>a</p></div></body></html>



>N6はレイヤー関連は使えなかったのでは

レイヤーというよりはイベントです。domのworking draft(など)を追うと分かるようにdom1ではイベントは定義されていません。dom2-event以前のweb上の文書の中には「domはイベントに関知しない」と紛らわしい(または間違った)解釈を述べたものがあります。アホな私も一時はちょっと悩んだこともありました。
そういう経緯と現状を眺めると、n6のイベントに関しては後方互換と言うよりも豊かなdom2-eventやdom3-eventをサポートするまで暫定的に自社の述語で代用しているのではなかろうかと思うのですが定かではありません。


回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]
ChaichanPAPA's World