10 | 2017/11 |  12

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 

HTML要素のサイズや位置を取得する

エントリイ内JavascriptExercise

1-2 任意の要素の画面上の位置、幅、高さ等の諸属性を取得する

何らかのイベント発生に対応して、或る位置に文字や画像を表示したいことは沢山ある。その場合には当然乍ら、その表示位置を指定する必要がある。そしてその表示位置はイベント発生要素が持つ諸属性値の関数として、つまりイベント発生要素の位置・幅・高さの関数として設定することが出来るはずである。

そこでまずイベント発生要素の位置、サイズ等を取得してみる。

イベント発生要素の位置と大きさを取得できれば、position absolute属性を持つ要素にも、また通常のストリーム内にある要素にも、あるいはposition relative属性を持つ要素にも、全ての表示に利用することが出来るし、言わずもがなであるがpopup表示にも活用できる。

試験内容

次の文字列(p要素)にmouseoverすると、p要素の位置属性等を各テキストフィールド内に表示する。


sizes & positions of this element


offsetプロパティによって位置やサイズを取得してみた。ここでもまた、IEとGekkoではoffsetParentが全く異なる概念であることに悩まされなければならなかった。 _(・・;φウッ・・・

マウス座標 x :

マウス座標 y :

tagName :

この要素幅 offsetWidth :

この要素高 offsetHeight :

第1offsetParentの tagName :

第1offsetParentの ID:

この要素の左上偶部の、第1OP からの横方向位置 offsetLeft :

この要素の左上偶部の、第1OP からの縦方向位置 offsetTop :

第2の、そして最上位の offsetParentの tagName :

第2の、そして最上位の offsetParentの ID:

この要素の左上偶部の、第2OP からの横方向位置 offsetLeft:

この要素の左上偶部の、第2OP からの縦方向位置 offsetTop:


コメント

  1. mouse位置については、Javascript外部ファイル内で取得関数を設定している。

  2. IEでは第1offsetParent、第2offsetParent、・・・と階層構造を為すが、Firefox の場合にはoffsetParentは唯1つ(body要素)しかないことが試行錯誤の結果やっと解明できた。(^。^;)フウ~。

    同じプロパティ名でこれ程に概念が異なるとは全く厄介なことである。そのことを試行錯誤して解明するのに丸々1日掛かってしまった!

    世に出回っているJavascript解説本で、offsetParentについて正確に記述したものはあるのだろうか? 少なくとも手持ちの数冊の書籍では記述があっても誤っているか、あるいは全く記述がなかった。

  3. IEにおけるoffsetParentは極めて扱いにくい。それは上位要素parentElementとイコールではなく、一定の条件下にある上位要素がoffsetParentになるらしい。その一定の条件については、「offsetParentとparentElement」に詳述されている。

  4. 結論として、IE以外では任意要素の位置はoffsetLeftとoffsetTopで容易に取得できる。(2007/06/27追記:←この記述は間違いだった。Opera9は簡単にoffsetLeft,同Topによって要素の位置を取得出来るが、FF2.0.0.4でもoffsetLeft等だけでは正確な絶対位置や取得できない。詳細は offsetLeft,offsetTop,offsetWidthそしてoffsetHeight──静的配置要素の絶対位置を確実に取得する方法についてに記述した。) しかし、IEにおいてはHTML文上でoffsetParentの階層構造を解析し、しかもparentElementの内、どれがoffsetParentなのかも特定し、しかる後にbody要素からのoffsetLeft値とoffsetTop値を取得しなければならないことになる。非常に煩雑であり面倒で堪らない。もっと簡便な方法はないのだろうか?!IE7という果報を寝て待つか?(苦笑)

    しかし、果たしてそれは果報たり得るのだろうか?

Javascript呼び出しHTML文

<p style="text-align:center" onmouseover="dispSizePos(this)">sizes & positions of this element</p>

Javascript コードの解説

//エレメント属性取得
function calcSizePos(which){
 var values = new Array(
  absX, //頁上の絶対横位置。外部スクリプトでGlobal変数として定義し値を取得。
  absY,  //頁上の絶対縦位置。同上
  which.tagName,
  which.offsetWidth,
  which.offsetHeight,

  which.offsetParent.tagName,
  which.offsetParent.id, // ← container
  which.offsetLeft,
  which.offsetTop,

  which.offsetParent.offsetParent.tagName, // ← body
  which.offsetParent.offsetParent.id,
  which.offsetLeft + which.offsetParent.offsetLeft,
  which.offsetTop + which.offsetParent.offsetTop
 );
 return values;
}

 //サイズ等の表示
function dispSizePos(it) {
 var i=0, pos = calcSizePos(it);
 for (; i< pos.length ; i++) document.forms[0].elements[i].value = pos[i] || "";
}

 

■ コメントの投稿 ■

管理者にだけ表示を許可する

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/220-74027f30

●参照元一覧●

<provided Fc2>
<provided i2i>

▲ToTop

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

----------
200506111139
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。