05 | 2017/06 |  07

  1. 無料サーバー

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

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

スポンサーサイト

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

 

jquery.js (1.4) による要素位置の測定と適正な配置 (5) コード解読 (4)

jQuery().innerHeight()/innerWidth()/outerHeight()/outerWidth() メソッド、並びに jQuery().height()/widdth() メソッドの概要

これらの 6 つのインスタンスメソッドは、HTML 要素の大きさを計測するか、あるいは大きさを指定するメソッドです。(サイズ指定は、height 及び width メソッドのみ。つまり content だけがサイズ指定できる。)

まず、以上のメソッドを分かりやすく図解してみました。横幅の説明だけですが、敢えて煩雑にしてまで縦方向を示す必要はないでしょう。

これらのメソッドが、W3C 勧告の視覚整形モデルに準拠したボックスの各部寸法を取得するためのものであることは、図から一目瞭然です。

各メソッドのサイズ測定箇所図

jQuery().innerHeight()/innerWidth()
HTML 要素の padding 辺間のサイズを計測する読み取り専用メソッドで、返値は全て単位なしのピクセル数となります。
jQuery().outerHeight(margin)/outerWidth(margin)
引数 margin が true の場合には、HTML 要素の margin 辺間のサイズを計測する読み取り専用メソッドとなり、引数がないか false の場合には、HTML 要素の border 辺間のサイズを計測する読み取り専用メソッドとなります。ここに、返値は全て単位なしのピクセル数となります。
jQuery().height(size)、jQuery().width(size)
引数がある場合には、HTML 要素の content の高さや幅を指定し、そのサイズで表示させます。その際の指定単位は px に限定されず、適正な文字列ならば em %など他の単位も使用できます。
他方、引数がない場合には、HTML 要素の content の高さや幅の、単位なしのピクセル数を取得します。

jQuery().innerHeight()/innerWidth()/outerHeight()/outerWidth() メソッド、並びに jQuery().height()/widdth() メソッドのコード解読

これらのメソッドは 1 つの jQuery.each クラスメソッド内で定義されています。

このクラスメソッド内では、三項演算子が頻繁かつ多重的に使用されており、全体で 50 行近い長いコードとなっています。

これらのメソッドは html 要素に適用できるので、ページ内の各要素のサイズ計測に利用できることは勿論ですが、window、body、document などの頁等の全体を指す要素に対して適用して、文書全体の高さや window の横幅などの情報を得ることも出来ます。

5946:// Create innerHeight, innerWidth, outerHeight and outerWidth methods
   // 'Height' と 'Width' を対象として巡回走査する
5947:jQuery.each([ "Height", "Width" ], function(i, name){
5948: // i が 1 の時には変数 tl に Leftを、i が 0 の時には Top を代入する。
5949: var type = name.toLowerCase();
5950:
5951: // innerHeight and innerWidth
    // jQuery インスタンスメソッド innerHeight 及び innerWidth を定義する。
5952: jQuery.fn["inner" + name] = function(){
5953:  return this[0] ? // インスタンスに HTML 要素が登録されていれば
      // 最初の HTML 要素の padding 辺までの height 又は width プロパティ値を取得する。
      // false 指定があるので算出スタイル値ではなく指定済みの CSS 値が取得される。
5954:   jQuery.css( this[0], lower, false, "padding" ) :
5955:   null; // インスタンスに HTML 要素が登録されていなければ null 値を返す。
5956: };
5957:
5958: // outerHeight and outerWidth
    // jQuery インスタンスメソッド outerHeight 及び outerWidth を定義する。
5959: jQuery.fn["outer" + name] = function(margin) {
5960:  return this[0] ? // インスタンスに HTML 要素が登録されていれば
      /* 引数が true ならばその margin 辺までの、引数が
       * 無指定か false ならばその border 辺までの、height 又は width CSS
       * スタイル値を取得する。ここでも false 指定があるので、算出スタイル値
       * ではなく指定されている CSS スタイル値が取得される。
       */
5961:   jQuery.css( this[0], lower, false, margin ? "margin" : "border" ) :
5962:   null; // インスタンスに HTML 要素が登録されていなければ null 値を返す。
5963: };
5964: 
    // jQuery インスタンスメソッド width() 及び height() を引数 size 付きで
    // jQuery.prototype オブジェクトに登録する。
5965: jQuery.fn[ type ] = function( size ) {
5966:  // Get window width or height
5967:  var elem = this[0]; // インスタンスに登録されている最初の html 要素への参照
5968:  if ( !elem ) { // elem がない場合の処理である
      // 引数 size がなければ nullを返し、あれば jQuery インスタンスを返す。
5969:   return size == null ? null : this;
5970:  }
5971:  // <ケース 1> elem が window の時には、
5972:  return ("scrollTo" in elem && elem.document) ?
      // does it walk and quack like a window ?
      // ↑ は慣用句なのでしょうか?意味が分かりません。
5973:   // Everyone else use document.documentElement or document.body depending on Quirks vs Standards mode
      // 人は皆は、標準/互換モード判別に document.documentElement か document.bodyを使用する。
      // CSS1標準モードならば document.documentElement.clientHeight/clientWidth を
5974:   elem.document.compatMode == "CSS1Compat" && document.documentElement[ "client" + name ] ||
      // 互換モードならば document.body.clientHeight/clientWidth を返す。
5975:   document.body[ "client" + name ] :
5976:
5977:   // Get document width or height
      // elem が document の場合
5978:   (elem.nodeType === 9) ? // is it a document
5979:    // Either scroll[Width/Height] or offset[Width/Height], whichever is greater
       // scrollWidth/Height 値と offsetWidth/Height 値の大きい方を返す。
5980:    Math.max(
5981:     elem.document.documentElement["client" + name],
5982:     elem.body["scroll" + name], elem.document.documentElement["scroll" + name],
5983:     elem.body["offset" + name], elem.document.documentElement["offset" + name]
5984:    ) :
5985:
5986:    // Get or set width or height on the element
       // <ケース 2> elem が window でない場合
5987:    size === undefined ? // <ケース 2-a>引数 size が未定義の時には
5988:     // Get width or height on the element
        // elem の height 値 または width 値を px 単位付きで返す。
5989:     jQuery.css( elem, type ) :
5980:
5991:     // Set the width or height on the element (default to pixels if value is unitless)
        /* <ケース 2-b>引数 size がある場合には
         * インスタンスに登録されている HTML 要素の height 又は width 値を
         * 引数が文字列型ならば size とし、引数が文字列型でないならば
         * size に px 文字列を追加した値とする。
         */
5992:     this.css( type, typeof size === "string" ? size : size + "px" );
5993: }; // 5965行の function はここまで
5994:
5995:});

 

■ コメントの投稿 ■

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

●トラックバック●

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

●参照元一覧●

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

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