プログラミング学習の記録 744.1 12章(動的なページの作成)の練習問題4(display/visibility/opacity, クリッピング)『初めてのJavaScript 第2版』(シェリー・パワーズ著、武舎広幸+武舎るみ訳、オライリー・ジャパン、2009年、ISBN978-4-84311-425-5)

開発環境

OS X Lion - Apple(OS)
Safari (Webプラウザ)
TextWrangler(Text Editor) (いずれはBBEditを入手したい！)
Script言語:JavaScript
JavaScript Library: jQuery

『初めてのJavaScript 第2版』(シェリー・パワーズ著、武舎広幸+武舎るみ訳、オライリー・ジャパン、2009年、ISBN978-4-84311-425-5)の12章(動的なページの作成), 練習問題4を解いてみる。

12-4.

ブロックを見えなくするには以下のようなattr()メソッド(jQuery)でstyleを設定するいくつかの方法がある。

cssのdisplayプロパティをnoneに設定。(この方法はページのレイアウトにも影響する。)

コード(TextWrangler)

$('#d0').attr('style','display:none');

cssのvisibilityプロパティをhiddenに設定する。(要素は見えなくなるが、領域は確保されたままなのでページのレイアウトは変更されない。)

コード(TextWrangler)

$('#d1').attr('style','visibility:hidden');

cssのopacityプロパティ(透明度)を0にする。(visibilityと同じくページのレイアウトは維持される。ブラウザによっては対応してないかも。とりあえずSafariは対応。)

コード(TextWrangler)

$('#d2').attr('style','opacity:0');

cssのclipプロパティで形状と寸法を指定してクリッピングする。具体的には短形(rect)のtop/right/bottom/leftの値を0に設定する。(この方法はページのレイアウトに影響する。また、cssのclipプロパティを使うには、cssのpositionプロパティをabsoluteまたはfixedに設定して領域を確保しておく必要がある。)

positionプロパティをabsoluteに設定した場合。

コード(TextWrangler)

$('#d3').attr('style','position:absolute;clip:rect(0,0,0,0)');

positionプロパティをfixedに設定した場合。

コード(TextWrangler)

$('#d4').attr('style','position:fixed;clip:rect(0,0,0,0)');

将来的には短形(rect)以外の形状も追加されるみたい。(『CSS完全ガイド第2版』(Eric A. Meyer 著、株式会社クイープ訳、オライリー・ジャパン、2005年、ISBN4-87311-232-X)より)