01 | 2017/03 |  03

  1. 無料サーバー

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

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

jQuery() の挙動を解読する(30) jQuery を使ってタグ属性( css 値含む)を設定/取得する upon ver1.3.2──jQuery解読(45)

このエントリイでは、HTML タグ要素の属性の設定/取得に係る(その属性の 1 つである CSS スタイル値の設定/取得を含む) jQuery の各種メソッドについて学習を深めたいと思います。

HTML要素の属性とは

そのためにまず、jquery.js 解読の前に、タグ要素属性、或いは 要素属性とは何か、どのような特性があるのか、改めて復習しておくべきでしょう。

HTML文では要素の属性を開始タグの中で指定します。属性には殆どの要素で共通して使用することの出来る次の 6 つの「汎用属性」があります。id、class、lang、title、style 及び dir です。

他方、href、src、xmlns 等々のように要素の機能・性格に応じた固有の属性が沢山あります。

さて、今日ではマイナーとなり、W3C非推奨とされていますが、ブラウザの黎明期から20世紀末頃までは、例えば、color、border、center、align等々のように、表示を左右する属性を要素属性に書き連ねる HTML 文が当たり前でした。

今や「文書の構造は HTML 文で、装飾を CSS と Javascript で」とのルールが支配的になっており、要素の style 属性を使用するインラインスタイル設定さえも推奨されていませんから、構造化したHTML文を書き続けていると、ついタグ要素属性のことは軽視しがちになってしまいます。

しかし、このエントリイで取り上げる attr インスタンスメソッドは、Javascriptからタグ要素属性を操作する訳ですから、改めて要素属性について認識を新たにする必要があります。特にstyle属性が存在する場合にのみ、当該要素に係るstyleオブジェクトが存在していることに注意しなければなりません。

jQuery.attr(elem, name, value) メソッドの機能

このメソッドは、第 1 引数で指定する要素の、第 2 引数で指定する属性を取得するか、または設定するものです。このように目的は単純ですが、ここでもまた IE 対策に多くのコードが費やされています。解読作業を通じて、IE の勝手な仕様に費やされたユーザーの労苦と年月を思い、改めて驚愕してしまいました。

さて、整理のためにもまず IE のタグ属性に係る固有仕様やバグを列挙しておきたいと思います。

Javascript でタグ属性をコントロールする場合に
配慮しなければならないIE 固有の仕様等
class 属性

DOM では class 属性を className 名で扱うが、W3C 準拠ブラウザの場合には getAttribute/setAttribute メソッドにおいては "class" で class 属性にアクセスできる。

しかし、IE では getAttribute/setAttribute メソッドにおいても class ではなく className としなければならない。

getAttribute メソッド
IE では "style" では style 属性値は取得できず、"cssText"を使わなければならない。
IE は href、src、style 属性値を取得する場合第 2 引数を要求する。
setAttribute メソッド
IE では DOM 要素に直接 style 属性を設定できない。替わりに elem.style オブジェクトに対して設定する。
IE は setAttribute メソッドにおいて自動的に value 値を文字列に変換しない。
opacity 属性
IE は alpha filter に固執している。
input タグの type 属性
IE はその属性値を勝手に変更する。
float プロパティ
IE の場合 style.cssFloat ではなく、style.styleFloat

jQuery.attr() クラスメソッド解読

■ jQuery.attr() クラスメソッド■
    // 引数は順に対象要素、属性名称、属性値
 967: attr: function( elem, name, value ) {
 968:  // don't set attributes on text and comment nodes
 969:  if (!elem || elem.nodeType == 3 || elem.nodeType == 8)
 970:   return undefined; // テキスト/コメントノードの場合には未定義値を返す。
 971:
 972:  var notxml = !jQuery.isXMLDoc( elem ), // elem が xml 文書内の要素かどうか
 973:   // Whether we are setting (or getting) // value があれば set = true、
 974:   set = value !== undefined; // なければ set = false。
 975:
 976:  // Try to normalize/fix the name  // xml 文書ではなくかつ、
     // name の値が登録されている標準名称であればそれを使う。
     // jQuery.props は #3212-#3223 で定義されているクラスプロパティ
 977:  name = notxml && jQuery.props[ name ] || name;
 978:
 979:  // Only do all the following if this is a node (faster for style)
 980:  // IE elem.getAttribute passes even for style
 981:  if ( elem.tagName ) { // elem にタグ名称があれば
 982:
 983:   // These attributes require special treatment
 984:   var special = /href|src|style/.test( name ); // 特殊名称かどうかチェック
 985:
 986:   // Safari mis-reports the default selected property of a hidden option
 987:   // Accessing the parent's selectedIndex property fixes it
 988:   if ( name == "selected" && elem.parentNode )
 989:    elem.parentNode.selectedIndex; // safari バグ対策。親ノードの index 値を設定
 990:
 991:   // If applicable, access the attribute via the DOM 0 way
      // elem 内に name があり xml 文書ではなく、特殊文字列でもなければ
 992:   if ( name in elem && notxml && !special ) {
 993:    if ( set ){ // value が与えられていれば(つまり設定の場合)
 994:     // We can't allow the type property to be changed (since it causes problems in IE)
        // 処理対象が input タグで name 値が type で、親要素があれば
 995:     if ( name == "type" && jQuery.nodeName( elem, "input" ) && elem.parentNode )
 996:      throw "type property can't be changed";
 997:
 998:     elem[ name ] = value; // name 値に value を「敢えて」代入する。
 999:    }
1000:
1001:    // browsers index elements by id/name on forms, give priority to attributes.
       // 処理対象が form タグ要素で name 属性値が取得できる場合には
1002:    if( jQuery.nodeName( elem, "form" ) && elem.getAttributeNode(name) )
        // そのノードバリュー値を return する。
1003:     return elem.getAttributeNode( name ).nodeValue;
1004:
1005:    // elem.tabIndex doesn't always return the correct value when it hasn't been explicitly set
1006:    // http://fluidproject.org/blog/2008/01/09/getting-setting-and-removing-tabindex-values-with-javascript/
1007:    if ( name == "tabIndex" ) {
1008:     var attributeNode = elem.getAttributeNode( "tabIndex" );
1009:     return attributeNode && attributeNode.specified //★不明な箇所
1010:      ? attributeNode.value
1011:      : elem.nodeName.match(/(button|input|object|select|textarea)/i)
1012:       ? 0
1013:       : elem.nodeName.match(/^(a|area)$/i) && elem.href
1014:        ? 0
1015:        : undefined;
1016:    }
1017:
1018:    return elem[ name ];
1019:   }
1020:   // IE では "style" を getAttribute/setAttribute メソッドに設定できないので、
1021:   if ( !jQuery.support.style && notxml &&  name == "style" )
       // elem として elem.style を、また nameとして cssText を使用して
       // jQuery.attr() メソッドを再帰呼び出しする。
1022:    return jQuery.attr( elem.style, "cssText", value );
1023:   // #1022 による再帰呼び出し時には、#981 の if 条件が成立しなくなるので、
      // #1024-#1035 は適用されない。つまり #1024-#1035 は name=="style" 時には
      // 適用されなくなる。
1024:   if ( set ) // 属性を設定する場合 IE では value 値を文字列に変換しないため
1025:    // convert the value to a string (all browsers do this but IE) see #1070
       // elem の name 属性ノードの値を強制的に文字列に変換する。
1026:    elem.setAttribute( name, "" + value );
1027:
1028:   var attr = !jQuery.support.hrefNormalized && notxml && special
1029:     // Some attributes require a special call on IE
        // 特殊な属性(href, src, style)の場合、取得に際して
        // IE のみ第 2 引数が必要となり、この 2 は「値を返す」の意だそうです。
1030:     ? elem.getAttribute( name, 2 )
1031:     : elem.getAttribute( name );
1032:
1033:   // Non-existent attributes return null, we normalize to undefined
      // #1028 で取得した attr が null 値ならば undefined に変える。
1034:   return attr === null ? undefined : attr;
1035:  } // #981以降の if 文がここで終わる。
1036:
1037:  // elem is actually elem.style ... set the style
1038:  // #1039-#1054 は #1040 行の if 条件により他のブラウザには適用されない。
     // 専ら IE だけに適用され、しかも再帰後の attr メソッドだけで意味のある
     // ブロックである。このブロック内の elem は #1021-#1022 により、既に
     // elem.style となっているが、1度目の attr メソッド実行では、このブロッ
     // クに到達する前に attr メソッドが再帰呼び出しされてしまう。よって
     //  #1039-#1054 ブロックは IEに対する再帰呼び出しの場合にのみ適用される。
1039:  // IE uses filters for opacity // IE の不透明度を処理する
1040:  if ( !jQuery.support.opacity && name == "opacity" ) {
1041:   if ( set ) { // 属性設定の場合
1042:    // IE has trouble with opacity if it does not have layout
1043:    // Force it by setting the zoom level
1044:    elem.zoom = 1;
1045:
1046:    // Set the alpha filter to set the opacity
       // elem.filter プロパティに opacity 属性をセットする。
1047:    elem.filter = (elem.filter || "").replace( /alpha\([^)]*\)/, "" ) +
        // alpha(・・・)があればそれを消去し、value に整数部がなければ空文字を、
        // 整数部があれば value 値を 100 倍してフィルター値を作成する。
1048:     (parseInt( value ) + '' == "NaN" ? "" : "alpha(opacity=" + value * 100 + ")");
1049:   }
1050:   // filter プロパティが存在し、"opacity=" 文字列があれば
1051:   return elem.filter && elem.filter.indexOf("opacity=") >= 0 ?
       // 2 番目の opacity(・・・) を100で割ってからその値を文字列化して返す。
       // なお何故 2 番目なのかは解明できなかった。
1052:    (parseFloat( elem.filter.match(/opacity=([^)]*)/)[1] ) / 100) + '':
1053:    ""; // "opacity=" 文字列がない場合空文字を返す。
1054:  } // IE 不透明度対策終わり
1055:  // name 文字列を駱駝文字列化する。置換後文字列に関数が置かれているが、
     // その使用と使い方については、学習のためにも後術する。
1056:  name = name.replace(/-([a-z])/ig, function(all, letter){
1057:   return letter.toUpperCase();
1058:  });
1059:
1060:  if ( set ) // 属性設定の時には elem の name 属性にここまで処理してきた
1061:   elem[ name ] = value; // value を代入する。
1062:
1063:  return elem[ name ]; // elem の name 属性値を返す。
1064: },

▲ToTop

jQuery().attr() インスタンスメソッド解読

attr() インスタンスメソッドは、当該インスタンスに登録されている要素の属性値を取得/設定するためのメソッドで、その内実は attr() クラスメソッドに他なりません。

とっても attr() メソッドは複雑な構造となっているため、引数の状態に応じて具体的なコード進行を探ってみます。

  • まず、引数が文字列型の name だけの場合

    インスタンスに登録されている最初の要素の name 属性値を取得します。このとき $.props() メソッドによりブラウザにより差異のある名称の統一が図られ、また当該 name に相当する属性が存在しない場合には(#1034)未定義値が返されます。(#172-179)

  • 次に、引数が nama と value の 2 つの場合

    当該インスタンスに登録されている各要素に対して、当該 name 属性に value 値を設定します。(#182-191)この場合 type がありませんから、$.attr メソッドの第 1 引数は this となります。

  • 第 3 に、引数が object 型の name だけの場合

    直前の場合と同様に #182-191 の部分が作動して、当該インスタンスに登録されている各要素に対して、nameオブジェクト内の各プロパティ名を属性とし、プロパティ値をその属性値に設定します。

  • 第 4 に、第 3 引数が与えられた場合(と言っても jquery.js においてそれは "curCSS" だけしかケースとしては存在していません。)

    name が文字列型ならば $.curCSS(this[0],name) が起動されて、インスタンスの最初の要素の、 name 属性の算出 CSS スタイル値を取得します。
    ここに算出 CSS スタイル値とは、ブラウザが当該要素を描画する際に算出されるスタイル値のことで、当該スタイル属性の定義有無に関わらず、ブラウザが算出するスタイル値となります。

    なお、後述するようにこのケースはまさに css() インスタンスメソッドそのものに他なりません。

  • 第 5 に、第 3 引数 type == "curCSS" が与えられ、かつ name がオブジェクト型の場合

    インスタンスの各要素の style オブジェクト( this.style )に対して、$.attr(this.style,name,$.prop(this,options[name],"curCSS",name) が起動されます。

    ここに prop クラスメソッドは、単位 "px" が必要なスタイル名にはそれを付け、不要ならば付与しない役割を果たします。

    こうして、各要素のstyle属性に対して value または value + "px" が設定されます。

■ jQuery().attr() インスタンスメソッド
   // 引数は順に属性名、属性値、type は 実際には"curCSS" 
168: attr: function( name, value, type ) {
169:  var options = name;
170:
171:  // Look for the case where we're accessing a style value
172:  if ( typeof name === "string" ) // name が文字型で
173:   if ( value === undefined ) // attr( name, type ) ならば
      // インスタンスの最初のノードが存在すれば、jQuery[type]( this[0], name )
      // 又は jQuery.attr( this[0], name ) の返値を返す。
      // type == "css" | "curCSS" ならば CSS 値を取得することになる。
      // 実際 css() インスタンスメソッドは this.attr(key,value,"curCSS") の
      // 形式で attr() インスタンスメソッドを呼び出す。
174:    return this[0] && jQuery[ type || "attr" ]( this[0], name );
175:
176:   else { // name が文字列型でないならば
177:    options = {}; // 変数 options を空オブジェクトに変えてから、
178:    options[ name ] = value; // { name : value } とする。
179:   }
180:
181:  // Check to see if we're setting style values
    // このブロックは name が文字型ではない場合に作動する。
182:  return this.each(function(i){ // インスタンス内の各要素エレメントに対して
183:   // Set all the styles  // 実際には style 以外の要素属性の設定も行う。
184:   for ( name in options ) // オブジェクト走査を行う。
185:    jQuery.attr( // jQuery.attr() クラスメソッドを起動して
186:     type ?
187:      this.style : // type があれば this.style
188:      this, // type がなければ this
       // attrメソッドの第 3 引数はjQuery.prop()メソッドの返値とする。
       // 返値は value + "px" または value となる。
189:     name, jQuery.prop( this, options[ name ], type, i, name )
190:    );
191:  });
192: },
193:

jQuery().css() インスタンスメソッド解読

このメソッドは css 値をインスタンスに設定したり、インスタンスから読み取るもので、内実は attr() インスタンスメソッドを利用しています。

具体的には、上述の jQuery().attr() インスタンスメソッドの第 4 のケースを参照してください。

■ jQuery().css() インスタンスメソッド
194: css: function( key, value ) {
195:  // ignore negative width and height values
196:  if ( (key == 'width' || key == 'height') && parseFloat(value) < 0 )
197:   value = undefined;
198:  return this.attr( key, value, "curCSS" );
199: },

▲ToTop

 

● コメント ●

承認待ちコメント ()

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

● コメント ●

承認待ちコメント ()

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

● コメント ●

承認待ちコメント ()

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

● コメント ●

承認待ちコメント ()

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

● コメント ●

承認待ちコメント ()

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

● コメント ●

承認待ちコメント ()

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

● コメント ●

承認待ちコメント ()

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

■ コメントの投稿 ■

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

●トラックバック●

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

●参照元一覧●

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

200903160043