RGBBA色と互換性のある半透明背景色javascript
3746 ワード
一、IEとFFの下でDcument.bodyオブジェクトのclientHeight、offset Height、scrollHeight属性の違い.
clientHeight
IEとFFの下では、この属性に差はなく、ブラウザの可視領域、つまりブラウザのツールバーのステータスバーの残りのページの展示空間の高さを指します.
offset Height
IEでは、offset Heightもブラウザの視認領域の高さである(境界線を含む).
FFの下で、offset Heightはページの具体的な内容の高さです.
scrollHeight
IEの下で、scrollHeightはページの具体的な内容の高さで、clientHeightより小さいことができます.
FFの下では、scrollHeightはウェブページの内容の高さですが、最小値はclientHeightです.
二、次はブラウザをまたいで現在のページの高さを取得する解決方法です.
コードは以下の通りです
コードは以下の通りです
コードは以下の通りです
clientHeight
IEとFFの下では、この属性に差はなく、ブラウザの可視領域、つまりブラウザのツールバーのステータスバーの残りのページの展示空間の高さを指します.
offset Height
IEでは、offset Heightもブラウザの視認領域の高さである(境界線を含む).
FFの下で、offset Heightはページの具体的な内容の高さです.
scrollHeight
IEの下で、scrollHeightはページの具体的な内容の高さで、clientHeightより小さいことができます.
FFの下では、scrollHeightはウェブページの内容の高さですが、最小値はclientHeightです.
二、次はブラウザをまたいで現在のページの高さを取得する解決方法です.
function getPageSize()
{
var body = document.documentElement;
var bodyOffsetWidth = 0;
var bodyOffsetHeight = 0;
var bodyScrollWidth = 0;
var bodyScrollHeight = 0;
var pageDimensions = [0,0];
pageDimensions[0]=body.clientHeight;
pageDimensions[1]=body.clientWidth;
bodyOffsetWidth=body.offsetWidth;
bodyOffsetHeight=body.offsetHeight;
bodyScrollWidth=body.scrollWidth;
bodyScrollHeight=body.scrollHeight;
if(bodyOffsetHeight > pageDimensions[0])
{
pageDimensions[0]=bodyOffsetHeight;
}
if(bodyOffsetWidth > pageDimensions[1])
{
pageDimensions[1]=bodyOffsetWidth;
}
if(bodyScrollHeight > pageDimensions[0])
{
pageDimensions[0]=bodyScrollHeight;
}
if(bodyScrollWidth > pageDimensions[1])
{
pageDimensions[1]=bodyScrollWidth;
}
return pageDimensions;
}
三、ページにdivを置いて、カバー層として、下にこのカバー層のcssスタイルがあります.コードは以下の通りです
.lockDiv
{
position:absolute;
left:0;
top:0;
height:0;
width:0;
border:2 solid red;
display:none;
text-align:center;
background-color:#DBDBDB;
filter:Alpha(opacity=60);
}
四、クライアントで下のjavascriptを使ってカバー層でページ全体を閉じます.コードは以下の通りです
var sandglassSpan = 1;
var timeHdl;
function DisablePage()
{
var ctrlSandglass = document.getElementById("divSandglass");
if(sandglassSpan==0)
{
window.clearTimeout(timeHdl);
ctrlSandglass.style.display = "none";
document.body.style.cursor = 'auto';
sandglassSpan = 1;
}
else
{
document.body.style.cursor = 'wait';
var pageDimensions = getPageSize();
ctrlSandglass.style.top = 0;
ctrlSandglass.style.left = 0;
ctrlSandglass.style.height = pageDimensions[0];
ctrlSandglass.style.width = pageDimensions[1];
ctrlSandglass.style.display = "block";
timeHdl = window.setTimeout(DisablePage,200);
}
}
五、もしページでAS.netのValidatorコントロールを使ったら、次のjavascriptを使うべきです.コードは以下の通りです
var sandglassSpan = 1;
var timeHdl;
function DisablePageHaveValidator()
{
var ctrlSandglass = document.getElementById("divSandglass");
if(false == Page_IsValid)
{
sandglassSpan = 0;
}
if(sandglassSpan==0)
{
window.clearTimeout(timeHdl);
ctrlSandglass.style.display = "none";
document.body.style.cursor = 'auto';
sandglassSpan = 1;
}
else
{
document.body.style.cursor = 'wait';
ctrlSandglass.style.display = "block";
var pageDimensions = getPageSize();
ctrlSandglass.style.top = 0;
ctrlSandglass.style.left = 0;
ctrlSandglass.style.height = pageDimensions[0];
ctrlSandglass.style.width = pageDimensions[1];
timeHdl = window.setTimeout(DisablePageHaveValidator, 200);
}
}
六、Dispable PageとDispable PageHaveValidatorの二つの方法はボタンのonclickイベントまたは他のタイミングで呼び出すことができます.