DHTML用ライブラリ集

ここでは、CrossBrowser用スクリプトを作成する上で、 基本的な情報の取得や設定を行うためのワンライナ的なスクリプト ( 要は数行の関数 )を紹介します

◆　ここで挙げている関数群は全て Windows98版 IE6, NN4, Mozilla で動作確認していますが、 その他のバージョンおよびプラットフォームでは確認していません
# 但し、Opera(Win, Linux), Safari(Mac), Konqueror(Linux) の最新版でも
# ほとんどの機能は動作するようにしてあるつもりです

もし、動作上の問題あるいは記述ミスなどを発見された方は、 ご面倒でもご連絡下さると喜びますf(^^;

目　次

■使用上の注意事項
◎共通変数について
◎関数の使用について
■ウィンドウ関連
◎ウィンドウの幅の取得
◎ウィンドウの高さの取得
◎ドキュメントの表示位置( 左上コーナのＸ座標 )の取得
◎ドキュメントの表示位置( 左上コーナのＹ座標 )の取得
■オブジェクトのハンドリング
◎レイア名からオブジェクトの取得
◎オブジェクト名称の取得
◎レイアの生成
◎外部参照レイアの生成
◎レイア内の Image オブジェクトの取得
◎レイア内の Form オブジェクトの取得
■レイアの位置制御
◎レイアの位置情報の初期化
◎レイア位置の取得
◎レイアの移動
◎外部参照レイア内のドキュメントのスクロール
■レイアのサイズ制御
◎レイアのサイズ情報の初期化
◎レイアのサイズの取得
◎レイアのサイズの変更
◎外部参照レイアのサイズの取得
■レイアの表示制御
◎可視性の設定
◎クリップ領域の設定
◎レイアに HTML の出力
◎レイアに背景色の設定
◎レイアに背景画像の設定
◎レイアの Z オーダの設定
◎レイアのスタイルの変更
◎外部参照レイアの変更
■イベント関連
◎マウス位置の取得
■ダウンロード

■使用上の注意事項

◎共通変数について

本ライブラリではライブラリ および ブラウザを識別するために、 いくつかの共通的な変数を使用しています 

// version of library
LCB_version = 3.1;
// _mac : true = macintosh, false = other os
_mac   =navigator.userAgent.toLowerCase().indexOf('mac')!=-1;
// _ie512 : true = MSIE 5.12(mac), false = others
_ie512 =navigator.userAgent.toLowerCase().indexOf('msie 5.12')!=-1;
// _kon : true = konqueror, false = others
_kon   =navigator.userAgent.toLowerCase().indexOf('konqueror')!=-1;
// _safari : true = safari, false = others
_safari=navigator.userAgent.toLowerCase().indexOf('safari')!=-1;
// _dom : kind of DOM.
//        IE4 = 1, IE5+ = 2, NN4 = 3, NN6+ = 4, others = 0
_dom = document.all?(document.getElementById?2:1):
                    (document.getElementById?4:
                    (document.layers?3:0));
_createLayerNo = 0;                    // layer no.

◆　これらの変数は、関数を使用する前に設定されていなければなりません

JavaScriptの言語仕様上、アンダースコア("_")で始まる変数名は禁止されていますが、 変数名があまりに安易なためスクリプトで記述する変数名と重複しないように ライブラリ集で使用する変数名にはあえてアンダースコアを使用しています

◆　_kon, _safari 変数は、 それぞれ Konqueror, Safari ブラウザ特有の処理をする場合に必要に応じて使用します
因みに、_kon 変数はこのスクリプト上では使用していません

◎関数の使用について

このライブラリ集で扱っている関数は IE でも NN でも同じ呼出形式で使用できるよう、 各関数内でブラウザの種別などの判別を行っています
また、古いバージョンのブラウザでも最低限エラーが発生しないように JavaScript の文法上新しい記法は使用していません

しかし、このような手法は時としてステップ数が多くなり、 実行スピードも上がらない等のデメリットも考えられ、決してオールマイティな構造ではありません

また、クロスブラウザとしての処理の実装方法も色々な手法があります

ですから、ここで挙げている関数群はこのままでも使用できますが、 あくまでもサンプルとして捉え、 必要に応じて改変・再実装などをして適した形に修正してご使用下さい

■ウィンドウ関連

◎ウィンドウの幅の取得

ウィンドウの幅( pixel数 )を取得します

★呼出形式
<pixel> = getWindowWidth();
function getWindowWidth (){
  if(_dom==4 || _dom==3) return window.innerWidth;
  if(_dom==2 || _dom==1) return document.body.clientWidth;
  return 0;
}

◆　フレームの親のウィンドウ幅はこの関数では取得できません
フレームの親のウィンドウ幅は document.body.clientWidth の代わりに document.body.offsetWidth を使用してください

◆　ウィンドウがフレーム構成の場合、 Konquerorでは onLoadイベント中にこの関数を呼び出すと実際のサイズとは異なる値になります

→ サンプル

◎ウィンドウの高さの取得

ウィンドウの高さ( pixel数 )を取得します

★呼出形式
<pixel> = getWindowHeight();
function getWindowHeight(){
  if(_dom==4 || _dom==3) return window.innerHeight;
  if(_dom==2 || _dom==1) return document.body.clientHeight;
  return 0;
}

◆ フレームの親のウィンドウ高さはこの関数では取得できません

◆　ウィンドウがフレーム構成の場合、 Konquerorでは onLoadイベント中にこの関数を呼び出すと実際のサイズとは異なる値になります

→ サンプル

◎ドキュメントの表示位置( 左上コーナのＸ座標 )の取得

表示するドキュメントがウィンドウ幅より大きい場合、 ドキュメントがどこから表示されているかを ドキュメント上のＸ座標( ウィンドウの左上コーナ部分の表示位置 )で取得します 

★呼出形式
<pixel> = getWinXOffset();
function getWinXOffset(){
  if(_dom==4)            return window.scrollX;
  if(_dom==2 || _dom==1) return document.body.scrollLeft;
  if(_dom==3)            return window.pageXOffset;
  return 0;
}
→ サンプル

◎ドキュメントの表示位置( 左上コーナのＹ座標 )の取得

表示するドキュメントがウィンドウ高さより大きい場合、 ドキュメントがどこから表示されているかを ドキュメント上のＹ座標( ウィンドウの左上コーナ部分の表示位置 )で取得します 

★呼出形式
<pixel> = getWinYOffset();
function getWinYOffset(){
  if(_dom==4)            return window.scrollY;
  if(_dom==2 || _dom==1) return document.body.scrollTop;
  if(_dom==3)            return window.pageYOffset;
  return 0;
}
→ サンプル

■オブジェクトのハンドリング

◎レイア名からオブジェクトの取得

名称を指定して対応するレイアオブジェクトを取得します

★呼出形式
<object> = getDivFromName(nm[,parentDivName...]);
<object>      : レイアオブジェクト
nm            : レイアの名称
parentDivName : 親のレイア名

function getDivFromName(nm){
  if(_dom==4 || _dom==2) return document.getElementById(nm);
  if(_dom==1)            return document.all(nm);
  if(_dom==3){
    var s='';
    for(var i=1; i<arguments.length; i++)
      s+='document.layers.'+arguments[i]+'.';
    return eval(s+'document.layers.'+nm);
  }
  return null;
}

使い方は、レイアが次のように記述されている場合

<div id="layer1" style="position:absolute">
  <div id="layer2" style="position:absolute">
    <div id="layer3" style="position:absolute">
    </div>
  </div>
</div>

◆　idで指定する名称は、そのドキュメント上でユニーク(固有)でなければなりません

layer1, layer2, layer3 はそれぞれ次のよう記述します

var layer1 = getDivFromName('layer1');
var layer2 = getDivFromName('layer2','layer1');
var layer3 = getDivFromName('layer3','layer1','layer2');
→ サンプル

◎オブジェクト名称の取得

指定されたレイアオブジェクトの名称を取得します

★呼出形式
<nm> = getDivName(div)
  <nm> : 名称
  div  : レイアオブジェクト
function getDivName(div){
  if(_dom==4 || _dom==2 || _dom==1) return div.id;
  if(_dom==3)                       return div.name;
  return '';
}
→ サンプル

◎レイアの生成

position:absolute; なレイアを生成します

★呼出形式
<object> = createLayer(left, top, width, height
                       [, parentLayer[, html ...]])
  <object>    : レイアオブジェクト
  left        : レイアの左上コーナのＸ座標( pixel )
  top         : レイアの左上コーナのＹ座標( pixel )
  width       : レイアの幅( pixel )
                0 を指定すると IE では 1 を設定する
  height      : レイアの高さ( pixel )
                0 を指定すると height を設定しない
  parentLayer : 生成するレイアの親のオブジェクト
                または null( 省略可 )
  html        : 生成時に書き出す HTML( 省略可 )
function createLayer(left,top,width,height,parentDiv){
  var s='';
  if(arguments.length>5){
    for(var i=5; i<arguments.length; i++) s+=arguments[i];
  }
  // ホントは createElement あたりでチェックしたいが IE4.0 から実装 (T_T;
  if(document.createAttribute){
    var divName= '_js_layer_'+_createLayerNo; _createLayerNo++;
    var pDiv   =parentDiv?parentDiv:document.body;
    var div    =document.createElement('DIV');
    div.id=divName;
    // IE の setAttribute 関数は腐っているのでしょーがなく...
    div.style.position='absolute';
    div.style.left=left;
    div.style.top =top;
    if(width >0) div.style.width =width +'px';
    if(height>0) div.style.height=height+'px';
    div.style.visibility='hidden';
    if(_mac && pDiv.insertAdjacentHTML){
      // Mac版 IE5.2 用描画バグ対策
      pDiv.appendChild(div); div.innerHTML=s;
    }
    else {
      div.innerHTML=s; pDiv.appendChild(div);
    }
    return div;
  }
  if(_dom==2 || _dom==1){
    var adj    =(_mac&&!_ie512)?' ':'';
    var divName= '_js_layer_'+_createLayerNo; _createLayerNo++;
    var ha     =(height>0)?(';height:'+height):'';
    var pDiv   =parentDiv?parentDiv:document.body;
    var html = '<div id="'+divName+'" style="position:absolute;'
             + 'left:'+left+';top:'+top
	     + (width >0?(';width:' +width +'px'):';width:1')
	     + (height>0?(';height:'+height+'px'):'')
	     + ';visibility:hidden;">'+s+'<'+'/div>'+adj;
    if(pDiv.insertAdjacentHTML) pDiv.insertAdjacentHTML('BeforeEnd',html);
    else pDiv.innerHTML+=html;
    return document.all(divName);
  }
  if(_dom==3){
    var div=parentDiv?(new Layer(width,parentDiv)):(new Layer(width));
    if(height>0) div.resizeTo(width,height);
    div.moveTo(left,top);
    if(s!=''){
      div.document.open('text/html','replace');
      div.document.write(s);
      div.document.close();
    }
    return div;
  }
  return null;
}

◆　この関数は onLoadイベント以降で使用できます
また、生成時は visibility が hidden に設定されています

◆　一応 Mac版IE 5.1 でも動作するように無理やりしていますが、 この反作用としてレイアの高さが１行余分になります
また、IE5.22 では appendChild後に HTMLを設定しているために 負荷が多少上がると思われます

◆　DOMの判定の一部に createAttribute 関数の有無を使用しているのは 最近のW3C DOMをサポートする IE互換のブラウザは document.all をサポートしていますが、insertAdjacentHTML をサポートしていないための 苦肉の策です f(^^;

使い方は、100×200pixel のレイアを( 10,50 )の位置に document直下に生成するだけなら、 以下のように記述します 

var div = createLayer(10,50, 100,200);

もし、レイアオブジェクト "layer1" 内に 100×200pixel のレイアを( 5,10 )の位置に生成するなら 

var div = createLayer(5,10, 100,200, layer1);

また、"<p>Hello!</p>" を内部に持つ、 幅100pixelのレイアを documentの( 10,20 )に生成するなら 

var div = createLayer(10,20, 100,0, null, '<p>Hello!<¥/p>');

とします
また、出力 HTML はカンマ "," で繋げて複数指定できます

→ サンプル

◎外部参照レイアの生成

外部ファイルを内容に持つ position:absolute; なレイアを生成します

★呼出形式
<object> = createExLayer(url, left, top, width, height
                         [, parentLayer])
  <object>    : レイアオブジェクト
  url         : 内部に表示する HTML を示す URL
  left        : レイアの左上コーナのＸ座標( pixel )
  top         : レイアの左上コーナのＹ座標( pixel )
  width       : レイアの幅( pixel )
  height      : レイアの高さ( pixel )
  parentLayer : 生成するレイアの親のオブジェクト
                ( 省略可 )
function createExLayer(url,left,top,width,height,parentDiv){
  if(_dom==4){
    var divName= '_js_layer_'+_createLayerNo; _createLayerNo++;
    var pDiv   =parentDiv?parentDiv:document.body;
    var div    =document.createElement('IFRAME');
    div.id=divName;
    div.name=divName;
    div.setAttribute('style',
       'position:absolute;left:'+left+';top:'+top
      +';width:'+width+(height>0?(';height:'+height):'')
      +';visibility:hidden');
    div.setAttribute('src',url);
    div.setAttribute('frameborder',0);
    div.setAttribute('scrolling','no');
    pDiv.appendChild(div);
    return div;
  }
  if(_dom==2 || _dom==1){
    var adj=(_mac&&_ie512)?' ':'';
    var bd, divName='_js_layer_'+_createLayerNo;
    _createLayerNo++;
    var ha=(height>0)?(';height:'+height):'';
    if(arguments.length>5 && parentDiv)
         bd=parentDiv;
    else bd=document.body;
    var html = '<div id="'+divName+'" style="position:absolute;'
             + 'left:'+left+';top:'+top
	     + ';width:'+width+ha+';visibility:hidden;">'
	     + '<iframe src="'+url+'" name="'+divName+'_if" '
	     + 'width='+width+' height='+height
	     + 'marginwidth=0 margineheight=0 '
	     + 'scrolling="no" frameborder="no">'
	     + '<'+'/iframe>'
	     + '<'+'/div>'+adj;
    if(bd.insertAdjacentHTML) bd.insertAdjacentHTML('BeforeEnd', html);
    else bd.innerHTML+=html;
    return document.all(divName);
  }
  if(_dom==3){
    var div=parentDiv?(new Layer(width,parentDiv)):
                      (new Layer(width));
    if(height>0) div.resizeTo(width,height);
    div.moveTo(left,top);
    div.load(url,width);
    return div;
  }
  return null;
}

◆　この関数は onLoadイベント以降で使用できます
また、生成時は visibility が hidden に設定されています

◆　一応 Mac版IE でも動作するように無理やりしていますが、 この反作用としてレイアの高さが１行余分になります

使い方は、同じディレクトリにある Hello.htm を内部に表示する、サイズが 200×100pixel のレイアを ( 10,50 )の位置に生成するには以下のように記述します 

var div = createExLayer('Hello.htm', 10,50, 200,100);
→ サンプル

◎レイア内の Image オブジェクトの取得

レイア内に HTML として記述されている Imageオブジェクトを取得します

★呼出形式
<object> = getDivImage(div,imgName);
  <object> : Imageオブジェクト
  div      : レイアオブジェクト
  imgName  : IMGタグの名称

function getDivImage(div,imgName){
  if(_dom==4)            return document.images[imgName];
  if(_dom==2 || _dom==1) return document.images(imgName);
  if(_dom==3)            return div.document.images[imgName];
  return null;
}

◆　この関数で指定する画像には ID属性 と NAME属性が共に同じ名称で 設定されていなければなりません

→ サンプル

◎レイア内の Form オブジェクトの取得

レイア内に HTML として記述されている Form要素を取得します

★呼出形式
<object> = getDivForm(div,frmName);
  <object> : Formのオブジェクト
  div      : レイアオブジェクト
  frmName  : Formの名称

function getDivForm(div,frmName){
  if(_dom==4)            return document.forms[frmName];
  if(_dom==2 || _dom==1) return document.forms(frmName);
  if(_dom==3)            return div.document.forms[frmName];
  return null;
}

◆　この関数で指定するFormには ID属性 と NAME属性が共に同じ名称で 設定されていなければなりません

→ サンプル

■レイアの位置制御

◎レイアの位置情報の初期化

指定されたレイアの位置情報を設定します

★呼出形式
initDivPos(div)
  div : 位置情報を初期化するレイアオブジェクト

function initDivPos(div){
  if(_dom==4){
    div.style.left=div.offsetLeft+'px';
    div.style.top =div.offsetTop +'px';
  } else if(_dom==2 || _dom==1){
    div.style.pixelLeft=div.offsetLeft;
    div.style.pixelTop =div.offsetTop;
  }
  return div;
}

◆　この関数は position:absolute; で、margin,border,padding 属性が 0 のレイアを対象とします

この関数はレイアの位置制御を行うとき、 レイアの位置情報が正確でない場合に最初に１回だけ呼び出して位置情報を設定します

ここで、位置情報が不定の場合とは以下の場合を言います

・インラインスタイルで left, top を指定しないでDIVタグを使用した場合

また、Mac版IE5 では body の margin 属性を "0" に設定しないと正しく動作しません

→ サンプル

◎レイア位置の取得

指定されたレイアの位置を取得します

★呼出形式
<left> = getDivLeft(div)    // Ｘ座標の取得
<top>  = getDivTop (div)    // Ｙ座標の取得
  <left> : レイアのＸ座標( pixel )
  <top>  : レイアのＹ座標( pixel )
  div    : レイアオブジェクト
function getDivLeft(div){
  if(_dom==4 || _dom==2) return div.offsetLeft;
  if(_dom==1)            return div.style.pixelLeft;
  if(_dom==3)            return div.left;
  return 0;
}

function getDivTop(div){
  if(_dom==4 || _dom==2) return div.offsetTop;
  if(_dom==1)            return div.style.pixelTop;
  if(_dom==3)            return div.top;
  return 0;
}

◆　この関数は position:absolute; なレイアを対象とします
div で指定するレイアの位置情報が不正確と思われる場合は、 あらかじめ initDivPos を呼び出してください

◆　Konqueror 3( _dom == 2) では style に設定した位置やサイズは すぐには offset*** に反映されません( 使用する場合変更が必要です )

→ サンプル

◎レイアの移動

指定されたレイアの位置を変更します

★呼出形式
moveDivTo( div, left, top)   // 絶対座標での移動
moveDivBy( div, dx, dy)      // 相対座標での移動
  div  : レイアオブジェクト
  left : レイアのＸ座標( pixel : 絶対座標 )
  top  : レイアのＹ座標( pixel : 絶対座標 )
  dx   : レイアのＸ方向の移動量( pixel )
  dy   : レイアのＹ方向の移動量( pixel )
function moveDivTo(div,left,top){
  if(_dom==4){
    div.style.left=left+'px';
    div.style.top =top +'px';
    return;
  }
  if(_dom==2 || _dom==1){
    div.style.pixelLeft=left;
    div.style.pixelTop =top;
    return;
  }
  if(_dom==3){
    div.moveTo(left,top);
    return;
  }
}

function moveDivBy(div,left,top){
  if(_dom==4){
    div.style.left=div.offsetLeft+left;
    div.style.top =div.offsetTop +top;
    return;
  }
  if(_dom==2){
    div.style.pixelLeft=div.offsetLeft+left;
    div.style.pixelTop =div.offsetTop +top;
    return;
  }
  if(_dom==1){
    div.style.pixelLeft+=left;
    div.style.pixelTop +=top;
    return;
  }
  if(_dom==3){
    div.moveBy(left,top);
    return;
  }
}

◆　この関数は position:absolute; なレイアを対象とします
div で指定するレイアの位置情報が不正確と思われる場合は、 あらかじめ initDivPos を呼び出してください

また、left,top には整数を指定します
実数を指定した場合には繰り返し呼び出すとIE では累積誤差が生じます

→ サンプル

◎外部参照レイア内のドキュメントのスクロール

createExLayer関数で生成したレイアに表示している ドキュメントのスクロール位置を変更します

★呼出形式
scrollExlHItTo(exdiv, x)     // 水平方向のスクロール
scrollExlVItTo(exdiv, y)     // 垂直方向のスクロール
  exdiv : 外部参照のレイアオブジェクト
  x,y   : スクロール位置( pixel )
function scrollExlHItTo(exdiv,x){
  if(_dom==4){
    frames[exdiv.id].scrollTo(x,frames[exdiv.id].scrollY);
    return;
  }
  if(_dom==2 || _dom==1){
    frames(exdiv.id+'_if').scrollTo(
        x,frames[exdiv.id+'_if'].document.body.scrollTop);
    return;
  }
  if(_dom==3){
    var dx=x-exdiv.clip.left, ch=exdiv.clip.width;
    exdiv.left-=dx;
    exdiv.clip.left=x; exdiv.clip.width=ch;
    return;
  }
  return;
}

function scrollExlVItTo(exdiv,y){
  if(_dom==4){
    frames[exdiv.id].scrollTo(frames[exdiv.id].scrollX,y);
    return;
  }
  if(_dom==2 || _dom==1){
    frames[exdiv.id+'_if'].scrollTo(
        frames[exdiv.id+'_if'].document.body.scrollLeft,y);
    return;
  }
  if(_dom==3){
    var dy=y-exdiv.clip.top, ch=exdiv.clip.height;
    exdiv.top-=dy;
    exdiv.clip.top=y; exdiv.clip.height=ch;
    return;
  }
  return;
}

◆　この関数は createExLayer関数で生成したレイアオブジェクトのみを対象とします

→ サンプル

■レイアのサイズ制御

◎レイアのサイズ情報の初期化

指定されたレイアのサイズ情報を設定します

★呼出形式
initDivSize(div)
  div : サイズ情報を初期化するレイアオブジェクト

function initDivSize(div){
  if(_dom==4){
    div.style.width =div.offsetWidth +'px';
    div.style.height=div.offsetHeight+'px';
  } else if(_dom==2 || _dom==1){
    div.style.pixelWidth =div.offsetWidth;
    div.style.pixelHeight=div.offsetHeight;
  }
  return div;
}

◆　この関数は absolute なレイアを対象とします

この関数はレイアのサイズ制御を行うとき、 レイアのサイズ情報が正確でない場合に最初に呼び出してサイズ情報を設定します
ここで、サイズ情報が不定の場合とは以下の場合を言います

・インラインスタイルで width, height を指定しないでDIVタグを使用した場合
・width, height は指定しているが、ブラウザによりサイズが調整される場合

◆　W3C の仕様では現在のサイズを取得するのに getComputedStyle を使用することになっていますが、 このスクリプトでは offsetWidth/offsetHeight を使用しています

W3C DOM の仕様に合わせたスクリプトにするには以下のようにします

if(_dom==4){
  var style=document.defaultView.getComputedStyle(div,null);
  div.style.width =style.getPropertyValue('width' );
  div.style.height=style.getPropertyValue('height');
}

また、getComputedStyle は、該当するプロパティが全く指定されない場合、 'auto' となりますので注意してください

→ サンプル

◎レイアのサイズの取得

指定されたレイアのサイズを取得します

★呼出形式
<width>  = getDivWidth (div)
<height> = getDivHeight(div)
  <width>  : レイアの幅( pixel )
  <height> : レイアの高さ( pixel )
  div      : サイズを取得するレイアオブジェクト

function getDivWidth (div){
  if(_dom==4 || _dom==2) return div.offsetWidth;
  if(_dom==1)            return div.style.pixelWidth;
  if(_dom==3)            return div.clip.width;
  return 0;
}

function getDivHeight(div){
  if(_dom==4 || _dom==2) return div.offsetHeight;
  if(_dom==1)            return div.style.pixelHeight;
  if(_dom==3)            return div.clip.height;
  return 0;
}

◆　この関数は position:absolute; なレイアを対象とします
div で指定するレイアのサイズ情報が不正確と思われる場合は、 あらかじめ initDivSize を呼び出してください

◆　Konqueror 3( _dom == 2) では style に設定した位置やサイズは すぐには offset*** に反映されません( 使用する場合変更が必要です )

→ サンプル

◎レイアのサイズの変更

指定されたレイアのサイズを変更します

★呼出形式
resizeDivTo(div, width, height)   // 絶対サイズ
resizeDivBy(div, dw, dh )         // 相対サイズ
  div    : サイズを変更するレイアオブジェクト
  width  : レイアの幅    ( pixel )
  height : レイアの高さ  ( pixel )
  dw     : Ｘ方向の変更量( pixel )
  dh     : Ｙ方向の変更量( pixel )

function resizeDivTo(div,width,height){
  if(_dom==4){
    div.style.width =width +'px';
    div.style.height=height+'px';
    return;
  }
  if(_dom==2 || _dom==1){
    div.style.pixelWidth =width;
    div.style.pixelHeight=height;
    return;
  }
  if(_dom==3){
    div.resizeTo(width,height);
    return;
  }
}

function resizeDivBy(div,width,height){
  if(_dom==4){
    div.style.width =(div.offsetWidth +width )+'px';
    div.style.height=(div.offsetHeight+height)+'px';
    return;
  }
  if(_dom==2){
    div.style.pixelWidth =div.offsetWidth +width;
    div.style.pixelHeight=div.offsetHeight+height;
    return;
  }
  if(_dom==1){
    div.style.pixelWidth +=width;
    div.style.pixelHeight+=height;
    return;
  }
  if(_dom==3){
    div.resizeBy(width,height);
    return;
  }
}

◆　この関数は position:absolute; なレイアを対象とします
div で指定するレイアのサイズ情報が不正確と思われる場合は、 あらかじめ initDivSize を呼び出してください

→ サンプル

◎外部参照レイアのサイズの取得

外部参照レイアのサイズを取得します

★呼出形式
<width>  = getExlWidth(exdiv)
<height> = getExlHeight(exdiv)

function getExlWidth (exdiv){
  if(_dom==4)
    // NN6 is buggy( same exdiv.offsetWidth )
    return exdiv.contentDocument.body.offsetWidth;
  if(_dom==2 || _dom==1)
    return _mac?frames[exdiv.id+'_if'].document.body.offsetWidth:
                frames[exdiv.id+'_if'].document.body.scrollWidth;
  if(_dom==3)
    return exdiv.document.width;
  return 0;
}

function getExlHeight(exdiv){
  if(_dom==4)
    return exdiv.contentDocument.body.offsetHeight;
  if(_dom==2 || _dom==1)
    return _mac?frames[exdiv.id+'_if'].document.body.offsetHeight:
                frames[exdiv.id+'_if'].document.body.scrollHeight;
  if(_dom==3)
    return exdiv.document.height;
  return 0;
}

◆　この関数は createExLayer関数で生成したレイアオブジェクトのみを対象とします

また、Mac版IE5 では getExlHeight は正しく動作しません

→ サンプル

■レイアの表示制御

◎可視性の設定

レイアの visibility を設定します

★呼出形式
setDivVisibility  (div,  visible)
setDivVisibilities(divs, visible)
  div     : レイアオブジェクト
  divs    : レイアのオブジェクト配列
  visible : 可視性( true : 可視, false : 不可視 )
function setDivVisibility(div,visible){
  if(_dom==4 || _dom==2 || _dom==1){
    div.style.visibility=(visible)?'inherit':'hidden';
    return;
  }
  if(_dom==3){
    div.visibility      =(visible)?'inherit':'hide';
    return;
  }
}

function setDivVisibilities(divs,visible){
  if(_dom==4 || _dom==2 || _dom==1){
    for(var i=0; i<divs.length; i++)
      divs[i].style.visibility=(visible)?'inherit':'hidden';
  }
  if(_dom==3){
    for(var i=0; i<divs.length; i++)
      divs[i].visibility      =(visible)?'inherit':'hide';
  }
  return divs;
}
→ サンプル

◎クリップ領域の設定

レイアにクリップ領域を設定します

★呼出形式
setDivClip(div, top, right, bottom, left)
  div    : レイアオブジェクト
  top    : 上部のクリップ位置( pixel )
  right  : 右部のクリップ位置( pixel )
  bottom : 下部のクリップ位置( pixel )
  left   : 左部のクリップ位置( pixel )
function setDivClip(div,top,right,bottom,left){
  if(_dom==4 || _dom==2 || _dom==1){
    div.style.clip=
        'rect('+top+'px '+right+'px '+bottom+'px '+left+'px)';
    return;
  }
  if(_dom==3){
    div.clip.top   =top;   div.clip.right=right;
    div.clip.bottom=bottom;div.clip.left =left;
    return;
  }
}

◆　Opera7.22 では一応クリップされるものの背景色などは正しく描画されません

→ サンプル

◎レイアに HTML の出力

レイアに HTML を出力します

★呼出形式
writeDivHTML(div, op, cl, html[,html...])
  div  : レイアオブジェクト
  op   : div の内容をクリアする
  cl   : div の出力データの最後
  html : 書き出す HTML
function writeDivHTML(div,op,cl){
  var s='';
  for(var i=3; i<arguments.length; i++) s+=arguments[i];
  if(_dom==4){
    if(op){
      while(div.hasChildNodes())
        div.removeChild(div.lastChild);
    }
    var range=document.createRange();
    range.selectNodeContents(div);
    range.collapse(true);
    var cf=range.createContextualFragment(s);
    div.appendChild(cf);
    return;
  }
  if(_dom==2 || _dom==1){
    if(op)   div.innerHTML='';
    if(div.insertAdjacentHTML && !(_mac&&_ie512))
         div.insertAdjacentHTML('BeforeEnd',s);
    else div.innerHTML+=s;
    return;
  }
  if(_dom==3){
    if(op) div.document.open('text/html','replace');
    div.document.write(s);
    if(cl) div.document.close();
    return;
  }
}

◆　Mac版 IE では、 html が複雑になるとうまく動作しないようです

また、Mac版 IE では innerHTML を使用しているため、 出力対象のレイアにあるオブジェクトは一旦破棄されますので、 変数に記憶している場合は再取得が必要になります

→ サンプル

◎レイアに背景色の設定

レイアの背景色を設定します

★呼出形式
setDivBackgroundColor(div, color)
  div   : レイアオブジェクト
  color : 設定する色( 透明の場合は "null" を指定する )
function setDivBackgroundColor(div,color){
  if(_dom==3) div.bgColor=color;
  else        div.style.backgroundColor=color?color:'transparent';
}
→ サンプル

◎レイアに背景画像の設定

レイアの背景イメージを設定します

★呼出形式
setDivBackgroundImage(div, url)
  div : レイアオブジェクト
  url : 背景として設定する画像ファイルの URL
function setDivBackgroundImage(div,url){
  if(_dom==3)
    div.background.src=url?url:null;
  else
    div.style.backgroundImage=url?('url('+url+')'):'none';
}
→ サンプル

◎レイアの Z オーダの設定

レイアの Zオーダを設定します

★呼出形式
setDivZIndex(div, order)
  div   : レイアオブジェクト
  order : Z オーダ
function setDivZIndex(div,order){
  if(_dom==4 || _dom==2 || _dom==1){
    div.style.zIndex=order;
    return;
  }
  if(_dom==3){
    div.zIndex      =order;
    return;
  }
}
→ サンプル

◎レイアのスタイルの変更

インライン style 属性を設定します

★呼出形式
setDivStyleAttribute(div,nm,value)
  div   : レイアオブジェクト
  nm    : 属性名( CSS の属性名ではなく DOM の名称です )
  value : 属性値

function setDivStyleAttribute(div,nm,value){
  if(_dom!=0 && _dom!=3) eval('div.style.'+nm+'=value');
  return div;
}
→ サンプル

◆　この関数は NN4 では無処理になります

◎外部参照レイアの変更

外部参照レイアの外部ファイルを変更します

★呼出形式
changeExlURL(exdiv, url)
  exdiv : 外部参照レイアのオブジェクト
  url   : 内部に表示する HTMLファイルの URL
function changeExlURL(exdiv,url){
  if(_dom==4){
    exdiv.setAttribute('src',url);
    return;
  }
  if(_dom==2 || _dom==1){
    frames[exdiv.id+'_if'].location.replace(url);
    return;
  }
  if(_dom==3){
    exdiv.load(url,exdiv.clip.width);
    return;
  }
  return;
}

◆　この関数は createExLayer関数で生成したレイアオブジェクトのみを対象とします

→ サンプル

■イベント関連

◎マウス位置の取得

指定されたイベントオブジェクトからマウス位置を算出します

★呼出形式
<left> = getLeftFromEvent(event)
<top>  = getTopFromevent(event)
  <left> : ドキュメント上のＸ座標
  <top>  : ドキュメント上のＹ座標
  event  : イベントオブジェクト
function getLeftFromEvent(e){
  if(_dom==4)
    return e.clientX+(_safari?0:window.scrollX);
  if(_dom==2||_dom==1)
    return document.body.scrollLeft+window.event.clientX;
  if(_dom==3)
    return e.pageX;
  return 0;
}

function getTopFromEvent(e){
  if(_dom==4)
    return e.clientY+(_safari?0:window.scrollY);
  if(_dom==2||_dom==1)
    return document.body.scrollTop+window.event.clientY;
  if(_dom==3)
    return e.pageY;
  return 0;
}

◆　この関数は タグで onMouseOver 等の属性を指定するとき

onMouseOver="handler(event);"

等と指定して使用するイベントハンドラ内で使用することを前提としています

◆　Safari 1.0(v85.6) はマウス座標が絶対値で設定されるため特殊処理をしていますが、 仕様かバグか不明です( つまり、将来修正が必要になるかもしれません )

→ サンプル

■ダウンロード

このページで紹介している関数を １つの JavaScriptファイル( jsファイル )として用意しました

LibCrossBrowser.js

◆　このファイルは基本的には HTML ファイル本体に必要な部分のみをコピーして 使用するようにして下さい

また、このファイルを外部ファイルとして使用することもできますが、 その際にはファイルの先頭部分に記述してある共通変数の記述を HTML本体に コピーして使用するか、あるいは HTML 本体の onLoad イベントで initCrossBrowserLib 関数を呼び出してご使用下さい

◆　もし、このファイルをそのまま使用する場合にはファイル内にある日本語のコメント ( Shift JIS )に起因するトラブルが発生する可能性がありますので、 日本語のコメントを削除するかまたは SCRIPTタグに「charset="Shift_JIS"」 という具合に文字コードを指定すると避けられるかもしれません

(c)2000 - 2004 hagiwara. All rights reserved.