common.js version 1.01

Index

variables

IncludeBorder DPI PixelOnly Support_instanceof

functions

changeDPIDialog _getPixel _getPixelEx
_getElementById _getElementsByTagName _getElementsByClassName
_getScrollPosX _getScrollPosY _setScrollPosX _setScrollPosY
_getDocumentWidth _getDocumentHeight _getClientWidth _getClientHeight
_getElementPos _setElementPos _showElement
RegisterFloatElement AdjustFloatElementPos AdjustFloatElementPos
_isOnElement sprintf

objects

POSITION FLOATELEMENT

注意事項

ブラウザの対応状況

動作確認をしたブラウザは以下の通り

既知の問題点

エレメントの初期値

　エレメントの位置、幅、高さ、z-index、ボーダー情報等は、 id属性を使ってスタイルシートで指定していても、JavaScriptからはその情報を 参照することが出来ません。 したがって、適当な初期化関数を用意して、その中で各エレメントの初期化を行ってください。 でないとこのスクリプトからは全てのエレメントが幅0，高さ0のエレメントとしか見えません。

width、height の扱い

　このスクリプトの関数で指定する幅や高さは、ボーダーの幅を含んでいます。 こうした仕様にした理由は、オブジェクトを配置するときには普通ボーダーも含んで１つのパーツとして 移動・リサイズを行うからです。従って、NetscapeやOpera、iCabなどでは、スタイルシートで width:100pt とした場合と、_setElementPos を 引数 width を "100pt" にして呼び出した場合とでは 左右のボーダーの幅分だけ差が出ます。

variables

booleanIncludeBorder

解説

ブラウザが要素の幅や高さに、ボーダーの幅を含むならtrue、含まないならfalseが入っています。

ボーダーを含むボーダーを含まない
truefalse

スクリプトが読み込まれた時点で自動判別した値が入るので、 エレメントの配置に _setElementPos を使用している限りは、 直接この値を参照・変更する必要はありません。

2002年1月現在、IEがtrue、その他がfalseとなっています。

numberDPI

解説

画面の論理解像度です。各OSの値は以下の通り。

Linux 72 dpi
Mac 72 dpi
Win（デフォルト） 96 dpi
Win（『大きいフォント』使用） 120 dpi

スクリプトが読み込まれた時点で自動判別し、 Windowsなら96、それ以外なら72が入ります。 ユーザーに変更してもらうには changeDPIDialog 等を利用してください。

booleanPixelOnly

解説

エレメントの位置・サイズを変更するときに、 ピクセル値でしか指定できない項目があるブラウザであればtrue、そうでなければfalseが入っています。 スクリプトが読み込まれた時点で自動判別した値が入るので、 通常、直接この値を参照・変更する必要はありません。

booleanSupport_instanceof

解説

instanceof演算子を処理できるならtrue、そうでなければfalseが入っています。 スクリプトが読み込まれた時点で自動判別した値が入るので、 通常、直接この値を参照・変更する必要はありません。

functions

voidchangeDPIDialog()

パラメータ

パラメータはありません

戻り値

戻り値はありません

解説

論理解像度変更ダイアログを表示します。

number_getPixel( length )

パラメータ

length< 単位付き数値型文字列 | number >
ピクセル値に変換する文字列を指定します。 「12.5」「2px」「5pt」等です。 変換可能な単位は以下の通り。
  • px (ピクセル)
  • pt (ポイント：72pt=1in)
  • pc (パイカ：1pc=12pt)
  • in (インチ)
  • cm (センチ)
  • mm (ミリ)

戻り値

ピクセル値が返ります。

解説

単位を含む、長さを表す文字列をピクセル値に変換します。

変換には、変数 DPI が使用されます。 この関数が呼ばれる前に DPI に適切な値を指定しておいて下さい。

number_getPixelEx( length )

パラメータ

length< 単位付き数式型文字列 | number >
ピクセル値に変換する文字列を指定します。 _getPixel とは違い、「10-2px+3.2pt」のように、 演算子を含む文字列をピクセル値に変換します。 使用可能な単位は以下の通り。
  • px (ピクセル)
  • pt (ポイント：72pt=1in)
  • pc (パイカ：1pc=12pt)
  • in (インチ)
  • cm (センチ)
  • mm (ミリ)

戻り値

ピクセル値が返ります。

解説

単位を含む、長さを表す文字列をピクセル値に変換します。

変換には、変数 DPI が使用されます。 この関数が呼ばれる前に DPI に適切な値を指定しておいて下さい。

element_getElementById( Window, id )

パラメータ

Window< window >
取得するエレメントを保持するウィンドウを指定します。
id< string >
取得するエレメントのIDを指定します。

戻り値

エレメントがあればエレメントが返ります。無ければnullが返ります。

解説

指定したIDを持つエレメントの取得します。

Array_getElementsByTagName( Window, tagName )

パラメータ

Window< window >
取得するエレメントを保持するウィンドウを指定します。
tagName< string >
取得するタグ名を指定します。

戻り値

エレメントがあればエレメントの配列が返ります。無ければnullが返ります。

解説

指定したタグのエレメントの配列をを取得します。

Array_getElementsByClassName( Window, tagName, className )

パラメータ

Window< window >
取得するエレメントを保持するウィンドウを指定します。
tagName< string >
タグ名によって取得するエレメントを限定する場合にはそのタグ名を指定します。任意のタグに適応するには*を指定してください。
className< string >
取得するクラス名を指定します。

戻り値

エレメントがあればエレメントの配列が返ります。無ければnullが返ります。

解説

指定したクラスに所属するエレメントの配列をを取得します。

number_getScrollPosX( Window )

パラメータ

Window< window >
スクロール状態を取得するウィンドウを指定します

戻り値

指定したウィンドウの表示領域の左端に表示されているx座標がピクセル単位で返ります

解説

指定したウィンドウのx方向のスクロール状態を取得します。

number_getScrollPosY( Window )

パラメータ

Window< window >
スクロール状態を取得するウィンドウを指定します

戻り値

指定したウィンドウの表示領域の上端に表示されているy座標がピクセル単位で返ります

解説

指定したウィンドウのy方向のスクロール状態を取得します。

boolean_setScrollPosX( Window, newX )

パラメータ

Window< window >
スクロール状態を変更するウィンドウを指定します
newX< 単位付き数値型文字列 | number >
x方向の表示開始座標を指定します

戻り値

成功した場合はtrue、それ以外はfalseが返ります

解説

指定したウィンドウのx方向のスクロール状態を設定します。

boolean_setScrollPosY( Window, newY )

パラメータ

Window< window >
スクロール状態を変更するウィンドウを指定します
newY< 単位付き数値型文字列 | number >
y方向の表示開始座標を指定します

戻り値

成功した場合はtrue、それ以外はfalseが返ります

解説

指定したウィンドウのy方向のスクロール状態を設定します。

number_getDocumentWidth( Window )

パラメータ

Window< window >
幅を取得するウィンドウを指定します

戻り値

指定したウィンドウのドキュメント全体の幅がピクセル単位で返ります

解説

指定したウィンドウのドキュメント全体の幅を取得します。

number_getDocumentHeight( Window )

パラメータ

Window< window >
高さを取得するウィンドウを指定します

戻り値

指定したウィンドウのドキュメント全体の高さがピクセル単位で返ります

解説

指定したウィンドウのドキュメント全体の高さを取得します。

number_getClientWidth( Window )

パラメータ

Window< window >
クライアントエリアの幅を取得するウィンドウを指定します

戻り値

指定したウィンドウのクライアントエリアの幅がピクセル単位で返ります

解説

指定したウィンドウのクライアントエリアの幅を取得します。

number_getClientHeight( Window )

パラメータ

Window< window >
クライアントエリアの高さを取得するウィンドウを指定します

戻り値

指定したウィンドウのクライアントエリアの高さがピクセル単位で返ります

解説

指定したウィンドウのクライアントエリアの高さを取得します。

POSITION_getElementPos( element )

パラメータ

element< element >
位置情報を取得するエレメントを指定します

戻り値

指定したエレメントの位置情報を保持する  POSITION が返ります

解説

指定したエレメントの位置情報を取得します。

幅、高さについては width、heightの扱い を参照のこと。

void_setElementPos( element, left, top, width, height, zIndex )
void_setElementPos( element, position )

パラメータ

element< element >
位置を設定するエレメントを指定します
left< 単位付き数値型文字列 | number >
エレメント左端のx座標を指定します
top< 単位付き数値型文字列 | number >
エレメント上端のy座標を指定します
width< 単位付き数値型文字列 | number >
幅を指定します
height< 単位付き数値型文字列 | number >
高さを指定します
zIndex< number >
zオーダーを指定します
position< POSITION >
zオーダーを指定します

戻り値

戻り値はありません

解説

指定したエレメントの位置を設定します。

幅、高さについては width、heightの扱い を参照のこと。

void_showElement( element, flag )

パラメータ

element< element >
表示状態を変えるエレメントを指定します
flag< boolean >
表示する場合はtrueを、隠す場合はfalse指定します

戻り値

戻り値はありません

解説

指定したエレメントの表示状態を変更します。

voidRegisterFloatElement( Window, id, left, top )

パラメータ

Window< element >
登録するエレメントを保有するウィンドウを指定します
id< string >
登録するエレメンを指定します
left< 単位付き数式型文字列 | number >
x座標を指定します。「13mm」「viewLeft+50pt」といった指定が可能です。詳しくは解説を参照
top< 単位付き数式型文字列 | number >
y座標を指定します。詳しくは解説を参照

戻り値

戻り値はありません

解説

指定したエレメントを、フロートエレメントとして登録します。フロートエレメントは、AdjustFloatElementPos が呼び出されると、登録したときの情報を基に自動的に再配置されます。

leftやtopでは、通常の単位のほかに四則演算子や以下の文字が使用できます。（※注）

leftで使用可能な文字
⻐z.r\ {L|[/th> 置換される数値
left 0
center ( ドキュメント全体の幅 - エレメントの幅 ) / 2
right ドキュメント全体の幅 - エレメントの幅
viewLeft _getScrollPosX の戻り値
viewCenter _getScrollPosX の戻り値 + ( クライアントエリアの幅 - エレメントの幅 ) / 2
viewRight _getScrollPosX の戻り値 + クライアントエリアの幅 - エレメントの幅
topで使用可能な文字
⻐z.r\ {L|[/th> 置換される数値
top 0
center ( ドキュメント全体の高さ - エレメントの高さ ) / 2
bottom ドキュメント全体の高さ - エレメントの高さ
viewTop _getScrollPosY の戻り値
viewCenter _getScrollPosY の戻り値 + ( クライアントエリアの高さ - エレメントの高さ ) / 2
viewBottom _getScrollPosY の戻り値 + クライアントエリアの高さ - エレメントの高さ

※上記の文字列が数値に置換された後、_getPixelEx （内部でevalを使用しています）に渡されるので、 正確に言えば四則演算に限らず、任意のJavaScript構文が使用可能です。 ただし、結果が数字であるものに限ります。
v
何らかの計算をして数値を返す自作関数fooを別に用意したのち。
RegisterFloatElement( window, 'element1', '0', 'foo()' );
として登録すると、エレメント「element1」はx座標が0、y座標がfooの戻り値、に再配置されます。

voidAdjustFloatElementPos()

パラメータ

パラメータはありません

戻り値

戻り値はありません

解説

RegisterFloatElement で登録したフロートエレメントを再配置します。

boolean_isOnElement( element, posX, posY, marginX, marginY )

パラメータ

element< element >
対象とするエレメントを指定します
posX< 単位付き数値型文字列 | number >
調べるx座標を指定します
posY< 単位付き数値型文字列 | number >
調べるy座標を指定します
marginX< 単位付き数値型文字列 | number >
マージンを「1px」「5cm」といった風に指定します。負の値も指定できます。詳細は解説を参照
marginY< 単位付き数値型文字列 | number >
マージンを指定します。詳細は解説を参照

戻り値

指定した座標が指定したエレメント上であるならtrueが、そうでなければfalseが返ります

解説

指定した座標が指定したエレメント上であるか否かを判別します。
マージン図解
この例では、青い枠の中ならばtrueが返ります。

stringsprintf( format [, argument] ... )

パラメータ

format< string >
書式制御文字列
argument< string | number >
オプションの引数

戻り値

書式化された文字列が返ります

解説

一連の文字や値を format に従って書式化し、それを返します。

% [flags] [width] [type]

flags
flag 意味 デフォルト
- 指定されたフィールド幅に結果を左詰めする。 右詰め
0 width の前に 0 を付けると、最小幅まで 0 が付加される。0 と - を指定すると、0 は無視される。書式 (x、X、o) と一緒に指定すると、0 は無視される。 パディングなし。
# o、x、X の各書式と一緒に使うと、0 以外のすべての出力値の前にそれぞれ o、0x、0X が付く。 表示されない。
W ２バイト文字（相当）で出力するようにします。「A」が「Ａ」に、「0」が「０」になります。 １バイト文字
width
表示する最小文字数を指定します。負でない10進数を指定してください。 出力文字数が指定文字数より少ない場合は、-フラグの有無によって値の右または左に空白が追加されます。 0フラグが指定されていれば、空白ではなく0が追加されます。
type
type データ型 出力書式
c 数値 与えられた数値を文字コードとして１文字出力します。
d 数値 与えられた数値を10進数形式で出力します。
o 数値 与えられた数値を8進数形式で出力します。
x 数値 与えられた数値を16進数形式で出力します。 値及びプリフィックスのアルファベットは小文字で出力されます。
X 数値 与えられた数値を16進数形式で出力します。 xとの違いは、値及びプリフィックスのアルファベットが大文字になることだけです。
s 文字列 与えられた文字列をそのまま出力します。 
v

left = 20
top = 150;
sprint( "( %03d , %03d )", left, top );// "( 020 , 150 )" が返る

objects

POSITION

プロパティ

left< number >
左端のx座標
top< number >
上橋のy座標
width< number >
Xs[/dd>
height< number >
高さ
zIndex< number >
zオーダー

解説

エレメントの位置・大きさの情報を保持するオブジェクト。

幅、高さについては width、heightの扱い を参照のこと。

FLOATELEMENT

プロパティ

window< window >
エレメントを保有するウィンドウ
element< element >
フロートエレメント
left< 単位付き数式型文字列 | number >
x座標情報
top< 単位付き数式型文字列 | number >
y座標情報

解説

 RegisterFloatElement 、 AdjustFloatElementPos  で、内部的に使用されます。直接操作することはありません。