01 | 2017/03 |  03

  1. 無料サーバー

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

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

jQuery.width()/height() メソッドの挙動を改めて解読する

問題の単純化のために、まず jQuery(・・・).width() メソッドに着目して分析を進め、一通りの作業を終えた後に、jQuery(・・・).height() メソッドにも言及することにします。width メソッドに付いて言えることは、本質的にそのまま height メソッドにも妥当するからです。

位置指定要素と通常配置要素の表示描画状態における幅

下の例でブロックボックス要素の描画幅について比較してみました。

このボックスは、まず position 属性を順に、無指定、relative、absolute、absolute と指定した 4 つの div 要素( 全て横幅は無指定で、class 名を target786 としました)を作り、それらの中にそれぞれ文字列を配した上で、それを包含する div 要素を offsetParent 要素として作成し配置したものです。最も外側の offsetParent たることを期待されている div 要素には、そのために position : relative が指定されています。ここに position:relative 指定した要素の top 値と left 値は共にゼロとしています。

なお、.target786 DIV 要素の offsetParent のコンテンツ領域を明示するために、このコンテンツ領域を padding、border 及び margin 値を全てゼロとした div 要素で囲み、pink 背景色を指定しました。

更になお、.target786 DIV 要素の margin 域を明示するために、.target786 DIV 要素を包含する padding、border 及び margin 値を全てゼロとした div 要素を配置し、その背景色を茶色としました。

この pink の背景領域は以下の要素を包含する要素のコンテンツ領域である。
これは通常配置されたdiv要素内に配置された文字列である。
これは相対配置されたdiv要素内に配置された文字列。
これは絶対配置されたdiv要素内に配置された文字列である。
これも絶対配置div要素内に配置された文字列

上の例で直ぐ分かるように、静的配置及び相対配置要素の横幅に注目すると、中のコンテンツサイズ(この場合文字列)に影響されず、margin、border、padding 及び内容が offsetParent 要素のコンテンツ領域横幅一杯に展開されています。(※ target786 DIV の上下の margin は相殺されている。)

一方、絶対配置要素の場合の横幅はそのコンテンツ幅に左右され、かつ margin 値を含まない固有の値となっています。(固定配置の場合にも同様に当該要素のコンテンツ幅によって決まる固有の値となりますが、固定配置の例はここでの例示には馴染まないので省略しました。なお、固定配置の場合にはその包含関係に関わらず offsetParent は body 要素となります。)

以上の position 指定による表示幅の違いから、或る要素のコンテンツの横幅を知ろうとすれば、そのコンテンツを絶対配置すれば計測できることが分かります。

そして、一般に要素は margin、border 及び padding の各値を有していますので、要素の幅にはコンテンツ幅、padding 辺幅、border 辺幅及び margin 辺幅があり、これらの計測のために次の 4つの jQuery インスタンスメソッドが定義されています。それは jQuery(・・・).width()、jQuery(・・・).innerWidth()、jQuery(・・・).outerWidth()、jQuery(・・・).outerWidth(true) です。

さて、絶対配置要素の幅がそれを包含する offsetParent サイズに依存せず、当該要素固有の値になることを利用して、当該要素の算出スタイル値を算出することが出来ます。jquery.js では swap メソッドがそれです。次に、swap メソッドを使う jQuery(・・・).width() メソッドの実行過程を具に追いかけ、コンテンツ幅を取得する方法を跡付けてみます。

▲ToTop

jQuery(・・・).width() メソッドはどのようにして対象要素のコンテンツ幅を測るのか?

以下のような複雑な過程を経て、対象要素 elem の算出スタイル width 値が算出されます。

  1. width インスタンスメソッドの定義
    width インスタンスメソッドは jquery.js ver1.42 の 6019~6074 行で定義されていますが、window や body を除く一般の要素の横幅計測は 6067 行の jQuery.css(elem,type) メソッド呼び出しを通して行われます。( jQuery().width() メソッドの場合には type 値は "width" となります。)
  2. display 属性値が none でない時
    1. 呼び出された jQuery,css クラスメソッドでは、elem.offsetWidth がゼロでなければ、つまり display 属性値が none でなければ getWH() 関数を実行し、この関数の中から、jQuery.curCSS クラスメソッドを呼び出します。
    2. この jQuery.curCSS クラスメソッドを呼び出し時には、第 3 引数が true に指定されるので(#4475~4481)、style 属性の有無に拘わらず、強制的に elem 要素の算出スタイル width 値が計測されます。なお、上で見たことから容易に分かるようにこの算出スタイル width 値は、当該要素が静的又は相対配置されている場合には offsetParent のコンテンツ幅となり、絶対又は固定配置されていれば、当該要素のコンテンツ幅となります。
  3. display 属性値が none の時
    1. 他方、elem.offsetWidth がゼロの場合(つまり、display 属性が none の時)には、jQuery,css クラスメソッドは jQuery.swap クラスメソッドを呼び出します。
    2. swap メソッドは style 属性の一部を一時的・強制的に入れ替えて算出スタイルを算出する関数で、position 値を absolute に、visibility 値を hidden に、display 値を block にそれぞれ入れ替えてから、getWH() 関数を呼び出して算出スタイル width 値を算出し、その直後に一時的に入れ替えた style 属性値を元に戻します。
      ここで注目すべきことは、絶対配置指定を行い、display を block に指定してブラウザに当該要素を描画させつつ、可視属性を hidden としていることです。これによりブラウザ上の当該要素の表示状態を全く変化させることなく、つまり表示させていない状態(display:none)を実質的に変化させることなく、算出スタイル値を測定しています。
      こうして swap メソッドと getWH 関数の巧みな組み合わせによって、要素のコンテンツ幅計測が行われていることが分かります。
【結論】
  1. 測定対象要素の position 指定値とその表示有無( display属性値 )によって、jQuery(・・・).width メソッドで測られる幅の値は異なります。
  2. 対象要素を表示状態( display:none 以外 )にして width インスタンスメソッドを適用すると、対象要素を包含するブロック要素のコンテンツ横幅から、当該要素の左右の padding 幅、当該要素の左右のボーダー幅及び左右のマージン値の 3 つの合算値を差し引いた値が計測されます。この値は必ずしも当該要素のコンテンツそのものの幅と同一ではありません。算出される値は当該要素がボックスとして取り得る最大のコンテンツ幅となります。
  3. 対象要素を非表示(display:none)にして width インスタンスメソッドを適用すると、当該要素の左右のパディング幅や左右のボーダー幅及び左右のマージン幅は無視され、対象要素のコンテンツ横幅が計測されます。

画像のようなインラインブロック要素を包含するブロック要素に jQuery(・・・).width() メソッドを適用して得られる値は何を指すのか?

これまで、要素を非表示状態にして width インスタンスメソッドを適用すれば、当該要素のコンテンツ幅が測られることを見てきました。

では、コンテンツがインラインブロック要素の場合で、その包含ブロック要素を非表示状態にして width メソッドを適用した場合、計測される値は何を指すのでしょうか?

img HTML タグには width や height だけではなく、W3C 非推奨ですが border、vspace、hspace 属性が設定出来ます。また span 要素でインラインブロック要素を包含して margin を設定することさえ可能です。そして実際多くの Web サイトでこれらの非推奨属性が未だに多用されています。このようなインラインブロックを包含するブロック要素に width メソッドを適用した場合の値について調べます。

(このように恰もブロック要素のように余白などが設定出来ることが、まさにインラインブロックと呼ばれる所以です。)

結論は自明です。インラインブロック要素の場合、余白やボーダー迄を含めてコンテンツなのですから、それは画像の幅+画像の左右の padding 幅+画像の左右のボーダー幅+画像の左右の margin 幅の合計値となります。なお、注意しなければならないことは、ここで言う padding、border、margin はインラインコンテンツを包含するブロック要素のそれらではありません。画像に固有に設定されている padding 等を指します。

以上のことを以下の例示で検証します。

この下の画像は id 名 img1-786 の div 要素の中に配置しましたが、インライン要素である画像タグには width="450px" 指定の他に、vspace="5px"、hspace="10px"、border="4px"等を指定してあります。

この div 要素に width() jQueryインスタンスメソッドを適用して「コンテンツ幅」計測を行ってみます。ここでは対象とする div 要素が表示されているため一寸工夫が必要です。具体的には div 要素の clone ノード( CNと呼ぶ )を作り、その display 値を none とした上で jQuery(CN).width メソッドを適用するのです。

その結果は、画像の直下にリアルタイムで表示するように script を組み込みました。

さて、div 要素に width メソッドを適用して得られた値 478px は、画像の幅を超えています。これは容易に検証できますが、width:450 + hspace:10*2 + border:4*2 に他なりません。つまり、インラインブロック要素自身の幅とボーダー幅とパディング幅の合計値となっています。

なお、ここでも IE だけは正しく作動しませんでした。Firefox、Chrome、Opera、Safari (全て Windows 版)では全て 478px となりましたが、IE8 の場合 478px ではなく 458px となってしまいます。余白幅が加算されないのです。その理由と IE7 や IE6 の場合どうなるかは検証に値する問題でもないでしょう。無視します。

こうして、インラインブロック要素を包含するブロック要素に jQuery(・・・).width メソッドを適用すると、インラインブロック要素のコンテンツ幅+余白+ボーダー幅の合算値が取得できること、並びに IE の場合には hspace を無視するバグがあることが検証できました。

jQuery(・・・).height() メソッドについて

これまで width メソッドについて述べてきたことはそのまま、height メソッドにも妥当するはずです。何故ならばこれら二つのメソッドは全く同一の jquery.js コードを利用するからです。

そのことを明らかにするために上の写真の、今度は高さを測って実証してみます。

既にコンテンツサイズ計測用の clone ノードは display:"none" 状態で作成済みなのでこれを再利用します。

リアルタイムに script で計測し、計測結果がこの下に表示されますが、画像そのものの高さが 301px であるのに対して display:"none" 状態の clone ノードに対して height メソッドを適用した結果は、予想通り 319px(301+vspace 5*2 + border 4*2。但し IE では vspace 値を拾わないので結果は 309 pxとなる。)となっています。

また、width メソッドで言及した結論は、 height メソッドについてもほぼ同様に以下のように主張出来ます。

【結論】
  1. 測定対象要素の position 指定値とその表示有無によって、jQuery(・・・).height メソッドで測られる高さの値は異なります。
  2. 対象要素を表示状態にして height インスタンスメソッドを適用すると、対象要素の offsetParent のコンテンツ高さから、当該要素の上下のパディング幅と上下のボーダー幅を差し引いた値を計測します。この値は基本的に当該要素のコンテンツ高さに等しくなります。
  3. 対象要素を非表示(display:none)にして height インスタンスメソッドを適用すると、対象要素のコンテンツ高さを計測します。
  4. width メソッドにおいては、display 値が block と none の場合とでは結果が異なることがあるのに対して、height メソッドでは、display 値に左右されずに同一値となります。

 

● コメント ●

承認待ちコメント ()

このコメントは管理者の承認待ちです

■ コメントの投稿 ■

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

●トラックバック●

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

●参照元一覧●

<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が開きます。

201009052249