window.navigatorオブジェクトクロスブラウザ対策
オブジェクト検出によるブラウザ判定
unknown
オブジェクトが使用できるかによって、ブラウザを判定します。
オブジェクトが使用可の場合にTRUE、使用不可の場合にFALSEが返ります。
<script type="text/javascript">
if(document.all){
/* Internet Explorer */
brw = "IE";
}else if(document.getElementById){
/* Firefox, Netscape Navigator 6以上 */
brw = "NN6";
}else if(document.layers ){
/* Netscape Navigator 4 */
brw = "NN4";
}else{
/* その他ブラウザ */
brw = "UnKnown";
}
document.write("閲覧ブラウザ："+brw);
</script>
レイヤの取得・設定（IE5～, NN6～）
unknown
document.getElementById();
IE 5+、Firefox、Netscape 6+
レイヤ名は、id属性に指定した名前を付けます。
obj = document.getElementById("レイヤ名"); /* レイヤを変数に代入 */
obj.style.top; /* Y座標 */
obj.style.left; /* X座標 */
objbgColor = obj.style.backgroundColor; /* 背景色の取得 */
obj.style.backgroundColor = #ffffff; /*背景色の設定 */
obj.style.width = width + "px"; /* 幅を設定（絶対値で指定） */
obj.style.height = height + "px"; /* 高さを設定（絶対値で指定） */
obj.style.width = (parseInt(obj.style.width) + width ) + "px"; /* 幅を設定(相対指定) */
obj.style.height = (parseInt(obj.style.height) + height ) + "px"; /* 高さを設定(相対指定) */
obj.style.left = x + "px"; /* 移動(横方向・絶対値) */
obj.style.top = y + "px"; /* 移動(縦方向・絶対値) */
obj.style.left = (parseInt(obj.style.left) + x ) + "px"; /* 移動(横方向・相対指定) */
obj.style.top = (parseInt(obj.style.top) + height ) + "px"; /* 移動(縦方向・相対指定) */
obj.style.zIndex = n; /* 重なる順序を指定 */
obj.style.visibility = "visible" or "hidden"; /* 表示・非表示'; */
レイヤの取得・設定（～IE5）
unknown
document.all();
IE 4.0+
obj = document.all("レイヤ名"); /* 変数に代入 */
obj.style.posTop; /* Y座標 */
obj.style.posLeft; /* X座標 */
objbgColor = obj.style.backgroundColor; /* 背景色の取得 */
obj.style.backgroundColor = #ffffff; /*背景色の設定 */
obj.style.pixelWidth = width; /* 幅を設定(絶対値) */
obj.style.pixelHeight = height; /* 高さを設定(絶対値) */
obj.style.width += width; /* 幅を設定(相対指定) */
obj.style.height += height; /* 高さを設定(相対指定) */
obj.style.pixelLeft = x; /* 移動(横方向・絶対値) */
obj.style.pixelTop = y; /* 移動(縦方向・絶対値) */
obj.style.pixelLeft += x; /* 移動(横方向・相対指定) */
obj.style.pixelTop += y; /* 移動(縦方向・相対指定） */
obj.style.zIndex = n; /* 重なる順序を指定 */
obj.style.visibility = "visible" or "hidden"; /* 表示・非表示 */
レイヤの取得・設定（NN4）
unknown
document.layers[];
IE 4のみ
var obj = document.layers["レイヤ名"]; /* 変数に代入 */ obj.pageX; /* Y座標 */ obj.pageY; /* X座標 */ var objbgColor = obj.bgColor; /* 背景色の取得 */ obj.bgColor = #ffffff; /* 背景色の設定 */ obj.moveTo( x, y ); /* 移動(絶対値) */ obj.moveBy( x, y ); /* 移動(相対値) */ obj.resizeTo( width, height ); /* レイヤサイズの変更 */ obj.zIndex = n; /* 重なる順序を指定 */ obj.visibility = "show" or "hide"; /* 表示・非表示 */
レイヤの表示・非表示
unknown
IE 5+、Firefox、Netscape 6+
<script type="text/javascript">
/* 動作確認：IE5～,FireFox,NN6～ */
var pc = true;
function func_pc(frm){
var obj = document.getElementById("parent");
if(pc){
pc = false;
frm.elements["btn_pc"].value = "visibility:visible";
obj.style.visibility = "hidden";
}else{
pc = true;
frm.elements["btn_pc"].value = "visibility:hidden";
obj.style.visibility = "visible";
}
}
</script>
<form action="#">
<p>親エレメントを表示・非表示にすると、子エレメントも親エレメントに従って表示・非表示になります。</p>
<p><input type="button" name="btn_pc" value="visibility:hidden" onclick="func_pc(this.form)" /></p>
<div id="parent">親エレメント
<div id="child">子エレメント</div>
</div>
</form>
レイヤー内のイメージ、フォームの設置
unknown
/* FireFox, N6, IE5, IE4 */ document.images[イメージ名].src="画像ファイル指定"; /* NN4 */ document[layName].document.images["イメージ名"].src="画像ファイル指定"; document.layers[layName].document.images["イメージ名"].src="画像ファイル指定";