JS中offset TopclientTop、scrollTop、offset Top
6751 ワード
ここはjavascriptでローリングコードを作るための一般的な属性です.
ページの可視領域の幅:document.body.client Width;ページの可視領域は高いです.document.body.clientHeight;ページの可視領域の幅:document.body.offset Width (境界線の幅を含む)ページの可視領域の高さ:Dcument.body.offset Height(境界線の幅を含む)ページの全文の幅:Dcument.body.scrollWidth;ホームページの全文は高いです.Dcument.body.scrollHeight;ページが巻かれている高さ:Dcument.body.scrollTop;ページが巻かれている左:document.body.scrollLeft;ホームページの本文の部分:window.screenTop;ホームページの本文の部分の左:window.screenLeft;スクリーン解像度の高さ:window.screen.height;画面解像度の幅:window.screen.width;スクリーン使用可能ワークエリアの高さ:window.screen.avail Height;
1、offset Left
ObjがあるHTMLコントロールであると仮定します.
Obj.offset Topとは、Objの距離の上または上のコントロールの位置、整数、単位画素を意味する.
obj.offset Leftとは、Objから左または上位のコントロールの位置、整体、単位画素を意味する.
obj.offset Widthとは、Objコントロール自体の幅、整数、単位画素をいう.
obj.offset Heightとは、Objコントロール自体の高さ、整数、単位画素のことです.
前に述べた「上または上」と「左または上」のコントロールについて説明します.
たとえば:
＜div id=「tool」＞
＜input type=「button」value=「提出」
＜input type=「button」value=「リセット」
「サブミット」ボタンのoffset Topは、「サブミット」ボタンが「tool」層の上縁からの距離を指し、その上から一番近いのは「tool」層の上縁です.
「リセット」ボタンのoffset Topは、「リセット」ボタンが「tool」層の上枠からの距離を指します.上から一番近いのは「tool」層の上縁ですから.
「サブミット」ボタンのoffset Leftとは、「サブミット」ボタンが「tool」層の左枠からの距離を指し、その左側から一番近いのは「tool」層の左枠です.
「リセット」ボタンのoffset Leftは、「リセット」ボタンから「サブミット」ボタンの右端までの距離を指します.その左から一番近いのは、「サブミット」ボタンの右端です.
以上の属性はFireFoxにも有効です.
また、ここで言っているのはHTMLコントロールの属性値です.Dcument.bodyではなく、Dcument.bodyの値は異なるブラウザで解釈されています.
タイトル:offset Topとstyle.topの違い
予備知識:offset Top、offset Left、offset Width、offset Height
私たちはoffset TopがHTML元素の距離の上か外側の要素の位置を得ることができることを知っています.style.topも可能です.両者の違いは:
一、offset Topは数字を返しますが、style.topは文字列を返します.数字以外に単位:pxもあります.
二、offset Topは読み取り専用で、style.topは読み書きができます.
三、HTML要素にtopスタイルを指定していない場合、style.topは空の文字列を返します.
offset Leftはstyle.left、offset Widthとstyle.width、offset Heightとstyle.heightも同じです.
タイトル:clientHeight、offset HeightとscrollHeight
私達はここで4種類のブラウザのDcument.bodyに対するclientHeight、offset HeightとscrollHeightの解釈を説明します.ここで言っているのはdocument.bodyです.HTMLコントロールなら、また違っています.ここをクリックして調べてください.
これらの4つのブラウザは、それぞれIE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)である.
2、clientHeight
clientHeight
clientHeightについては異論がありません.内容の可視領域の高さ、つまりページブラウザで内容が見えるこのエリアの高さは、一般的には最後のツールバー以下からステータスバー以上のこのエリアで、ページの内容とは関係がありません.
offset Height
IE、Operaはoffset Height=clientHeight+スクロールバー+フレームと考える.
NS、FFはoffset Heightがウェブページの内容の実際の高さだと思って、clientHeightより小さいことができます.
scrollHeight
IE、OperaはscrollHeightがウェブページの内容の実際の高さだと思って、clientHeightより小さいことができます.
NS、FFはscrollHeightはウェブページの内容の高さだと思っていますが、最小値はclientHeightです.
簡単に言えば
clientHeightはブラウザを通して内容を見るこのエリアの高さです.
NS、FFはoffset HeightとscrollHeightはすべてウェブページの内容の高さだと思っていますが、ウェブページの内容の高さがclientHeightに等しい時、scrollHeightの値はclientHeightで、offset HeightはclientHeightより小さいことができます.
IE、Operaは、offset Heightが可視領域clientHeightスクロールバーにフレームを付けると考えている.scrollHeightはウェブページの内容の実際の高度です.
同じ理屈
clientWidth、offset Width、scrollWidthの解釈は上記と同じで、高さを幅に置き換えるだけでよい.
しかし
FFは異なるDOCTYPEでclientHeightに対する解釈が違っています.xhtml 1 trastionalでは上記のように解釈されていません.他のブラウザにはこの問題がありません.
タイトル:scrollTop、scrollLeft、scrollwidth、scrollHeight
3、scrollLeft
scrollTopはボリュームの高さの値です.例:
＜div style=“width:100 px;height:100 px;background-色:菗FF 0000;overflow:hidden;”id=“p”＞
＜div style="width:50 px;height:300 px;background-色:菗0000 FF;"id=t"pにscrollTopを設定したら、これらの内容は完全に表示されないかもしれません.div>
＜script type=「text/javascript」＞
var p=document.getElemenntById(「p」);
p.scrollTop=10
外層要素pのためにscrollTopが設置されているので、内部要素は上巻になる.
scrollLeftも似たような道理です.
私たちはすでにoffset Heightが自身の元素の幅であることを知っています.
scrollHeightは内部要素の絶対幅であり、内部要素の隠れた部分を含む.
上記のpのscrollHeightは300であり、pのoffset Heightは100である.
scrollwidthも同様です.
IEとFireFoxは全面的にサポートされていますが、NetscapeとOperaはscrollTop、scrollLeft(document.bodyを除く)をサポートしていません.
発表日時:2007-10-15 20:20:16
タイトル:offset Top、offset Left、offset Width、offset Height
4、clientLeft
オブジェクトのoffset Left属性値と現在のウィンドウの左にある実際の値との間の距離を返します.枠の長さとして理解できます.
これまではoffset Left、offset Top、scrollLeft、scrollTopといういくつかの方法に迷っていましたが、一日をかけてしっかり勉強しました.以下の結果が得られました.
1.offset Top :
現在のオブジェクトから上位層までの距離.
値を付けることはできません.オブジェクトのページ上部までの距離を設定するには、style.top属性を使ってください.
2.offset Left:
現在のオブジェクトから上の階の左側までの距離です.
値を付けることはできません.オブジェクトをページ左端までの距離を設定するには、スタイル.left属性を使ってください.
3.offset Width:
現在のオブジェクトの幅
style.width属性との違いは、オブジェクトの幅設定値がパーセンテージ幅であれば、ページが大きくなっても小さくなってもstyle.widthはこのパーセンテージに戻りますが、offset Widthはパーセンテージ値よりも異なるページにオブジェクトの幅を返します.
4.offset Height:
style.height属性との違いは、オブジェクトの幅設定値がパーセンテージの高さであれば、ページが大きくなっても小さくなってもstyle.heightはこのパーセンテージに戻りますが、offset Heightはパーセンテージ値ではなく、異なるページのオブジェクトの高さを返します.
5.offset Part :
現在のオブジェクトの上位層のオブジェクト.
注意.対象が一つのDIVに含まれている場合、このDIVはこの対象の上位層とはみなされません.つまり対象の上位層はDIVオブジェクトをスキップします.
この属性を使うと、現在のオブジェクトのサイズが異なるページの絶対位置が得られます.
絶対位置スクリプトコードを取得
オブジェクトの一番左からオブジェクトの現在のウィンドウに表示される範囲の左側までの距離です.
すなわち、横スクロールバーが発生した場合、スクロールバーが引いた距離です.
7.scrollTop
オブジェクトの最上部からオブジェクトの現在のウィンドウに表示される範囲の上端までの距離です.
つまり、縦スクロールバーが出現した場合、スクロールバーが引いた距離です.
私達はここで4種類のブラウザのDcument.bodyに対するclientHeight、offset HeightとscrollHeightの解釈を説明します.ここで言っているのはdocument.bodyです.HTMLコントロールなら、また違っています.ここをクリックして調べてください.
これらの4つのブラウザは、それぞれIE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)である.
clientHeight
clientHeightについては異論がありません.内容の可視領域の高さ、つまりページブラウザで内容が見えるこのエリアの高さは、一般的には最後のツールバー以下からステータスバー以上のこのエリアで、ページの内容とは関係がありません.
offset Height
IE、Operaはoffset Height=clientHeight+スクロールバー+フレームと考える.
NS、FFはoffset Heightがウェブページの内容の実際の高さだと思って、clientHeightより小さいことができます.
scrollHeight
IE、OperaはscrollHeightがウェブページの内容の実際の高さだと思って、clientHeightより小さいことができます.
NS、FFはscrollHeightはウェブページの内容の高さだと思っていますが、最小値はclientHeightです.
簡単に言えば
clientHeightはブラウザを通して内容を見るこのエリアの高さです.
NS、FFはoffset HeightとscrollHeightはすべてウェブページの内容の高さだと思っていますが、ウェブページの内容の高さがclientHeightに等しい時、scrollHeightの値はclientHeightで、offset HeightはclientHeightより小さいことができます.
IE、Operaは、offset Heightが可視領域clientHeightスクロールバーにフレームを付けると考えている.scrollHeightはウェブページの内容の実際の高度です.
同じ理屈
clientWidth、offset Width、scrollWidthの解釈は上記と同じで、高さを幅に置き換えるだけでよい.
END
//エピソード
デスクトップブラウザでスクロールバーの値を取得するには、document.scrollTopとdocument.scrollLeftで得られますが、iOSではこの2つの属性は未定義であることが分かります.なぜですか?iOSにはスクロールバーの概念がないので、Androidではこの2つの属性によってスクロールバーの値を正常に取得できますが、iOSではどのようにスクロールバーの値を取得しますか?window.scrollyとwindow.scrollXを通じて、現在のウィンドウのy軸とx軸スクロールバーの値を得ることができます.
ページの可視領域の幅:document.body.client Width;ページの可視領域は高いです.document.body.clientHeight;ページの可視領域の幅:document.body.offset Width (境界線の幅を含む)ページの可視領域の高さ:Dcument.body.offset Height(境界線の幅を含む)ページの全文の幅:Dcument.body.scrollWidth;ホームページの全文は高いです.Dcument.body.scrollHeight;ページが巻かれている高さ:Dcument.body.scrollTop;ページが巻かれている左:document.body.scrollLeft;ホームページの本文の部分:window.screenTop;ホームページの本文の部分の左:window.screenLeft;スクリーン解像度の高さ:window.screen.height;画面解像度の幅:window.screen.width;スクリーン使用可能ワークエリアの高さ:window.screen.avail Height;
1、offset Left
ObjがあるHTMLコントロールであると仮定します.
Obj.offset Topとは、Objの距離の上または上のコントロールの位置、整数、単位画素を意味する.
obj.offset Leftとは、Objから左または上位のコントロールの位置、整体、単位画素を意味する.
obj.offset Widthとは、Objコントロール自体の幅、整数、単位画素をいう.
obj.offset Heightとは、Objコントロール自体の高さ、整数、単位画素のことです.
前に述べた「上または上」と「左または上」のコントロールについて説明します.
たとえば:
＜div id=「tool」＞
＜input type=「button」value=「提出」
＜input type=「button」value=「リセット」
「サブミット」ボタンのoffset Topは、「サブミット」ボタンが「tool」層の上縁からの距離を指し、その上から一番近いのは「tool」層の上縁です.
「リセット」ボタンのoffset Topは、「リセット」ボタンが「tool」層の上枠からの距離を指します.上から一番近いのは「tool」層の上縁ですから.
「サブミット」ボタンのoffset Leftとは、「サブミット」ボタンが「tool」層の左枠からの距離を指し、その左側から一番近いのは「tool」層の左枠です.
「リセット」ボタンのoffset Leftは、「リセット」ボタンから「サブミット」ボタンの右端までの距離を指します.その左から一番近いのは、「サブミット」ボタンの右端です.
以上の属性はFireFoxにも有効です.
また、ここで言っているのはHTMLコントロールの属性値です.Dcument.bodyではなく、Dcument.bodyの値は異なるブラウザで解釈されています.
タイトル:offset Topとstyle.topの違い
予備知識:offset Top、offset Left、offset Width、offset Height
私たちはoffset TopがHTML元素の距離の上か外側の要素の位置を得ることができることを知っています.style.topも可能です.両者の違いは:
一、offset Topは数字を返しますが、style.topは文字列を返します.数字以外に単位:pxもあります.
二、offset Topは読み取り専用で、style.topは読み書きができます.
三、HTML要素にtopスタイルを指定していない場合、style.topは空の文字列を返します.
offset Leftはstyle.left、offset Widthとstyle.width、offset Heightとstyle.heightも同じです.
タイトル:clientHeight、offset HeightとscrollHeight
私達はここで4種類のブラウザのDcument.bodyに対するclientHeight、offset HeightとscrollHeightの解釈を説明します.ここで言っているのはdocument.bodyです.HTMLコントロールなら、また違っています.ここをクリックして調べてください.
これらの4つのブラウザは、それぞれIE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)である.
2、clientHeight
clientHeight
clientHeightについては異論がありません.内容の可視領域の高さ、つまりページブラウザで内容が見えるこのエリアの高さは、一般的には最後のツールバー以下からステータスバー以上のこのエリアで、ページの内容とは関係がありません.
offset Height
IE、Operaはoffset Height=clientHeight+スクロールバー+フレームと考える.
NS、FFはoffset Heightがウェブページの内容の実際の高さだと思って、clientHeightより小さいことができます.
scrollHeight
IE、OperaはscrollHeightがウェブページの内容の実際の高さだと思って、clientHeightより小さいことができます.
NS、FFはscrollHeightはウェブページの内容の高さだと思っていますが、最小値はclientHeightです.
簡単に言えば
clientHeightはブラウザを通して内容を見るこのエリアの高さです.
NS、FFはoffset HeightとscrollHeightはすべてウェブページの内容の高さだと思っていますが、ウェブページの内容の高さがclientHeightに等しい時、scrollHeightの値はclientHeightで、offset HeightはclientHeightより小さいことができます.
IE、Operaは、offset Heightが可視領域clientHeightスクロールバーにフレームを付けると考えている.scrollHeightはウェブページの内容の実際の高度です.
同じ理屈
clientWidth、offset Width、scrollWidthの解釈は上記と同じで、高さを幅に置き換えるだけでよい.
しかし
FFは異なるDOCTYPEでclientHeightに対する解釈が違っています.xhtml 1 trastionalでは上記のように解釈されていません.他のブラウザにはこの問題がありません.
タイトル:scrollTop、scrollLeft、scrollwidth、scrollHeight
3、scrollLeft
scrollTopはボリュームの高さの値です.例:
＜div style=“width:100 px;height:100 px;background-色:菗FF 0000;overflow:hidden;”id=“p”＞
＜div style="width:50 px;height:300 px;background-色:菗0000 FF;"id=t"pにscrollTopを設定したら、これらの内容は完全に表示されないかもしれません.div>
＜script type=「text/javascript」＞
var p=document.getElemenntById(「p」);
p.scrollTop=10
外層要素pのためにscrollTopが設置されているので、内部要素は上巻になる.
scrollLeftも似たような道理です.
私たちはすでにoffset Heightが自身の元素の幅であることを知っています.
scrollHeightは内部要素の絶対幅であり、内部要素の隠れた部分を含む.
上記のpのscrollHeightは300であり、pのoffset Heightは100である.
scrollwidthも同様です.
IEとFireFoxは全面的にサポートされていますが、NetscapeとOperaはscrollTop、scrollLeft(document.bodyを除く)をサポートしていません.
発表日時:2007-10-15 20:20:16
タイトル:offset Top、offset Left、offset Width、offset Height
4、clientLeft
オブジェクトのoffset Left属性値と現在のウィンドウの左にある実際の値との間の距離を返します.枠の長さとして理解できます.
これまではoffset Left、offset Top、scrollLeft、scrollTopといういくつかの方法に迷っていましたが、一日をかけてしっかり勉強しました.以下の結果が得られました.
1.offset Top :
現在のオブジェクトから上位層までの距離.
値を付けることはできません.オブジェクトのページ上部までの距離を設定するには、style.top属性を使ってください.
2.offset Left:
現在のオブジェクトから上の階の左側までの距離です.
値を付けることはできません.オブジェクトをページ左端までの距離を設定するには、スタイル.left属性を使ってください.
3.offset Width:
現在のオブジェクトの幅
style.width属性との違いは、オブジェクトの幅設定値がパーセンテージ幅であれば、ページが大きくなっても小さくなってもstyle.widthはこのパーセンテージに戻りますが、offset Widthはパーセンテージ値よりも異なるページにオブジェクトの幅を返します.
4.offset Height:
style.height属性との違いは、オブジェクトの幅設定値がパーセンテージの高さであれば、ページが大きくなっても小さくなってもstyle.heightはこのパーセンテージに戻りますが、offset Heightはパーセンテージ値ではなく、異なるページのオブジェクトの高さを返します.
5.offset Part :
現在のオブジェクトの上位層のオブジェクト.
注意.対象が一つのDIVに含まれている場合、このDIVはこの対象の上位層とはみなされません.つまり対象の上位層はDIVオブジェクトをスキップします.
この属性を使うと、現在のオブジェクトのサイズが異なるページの絶対位置が得られます.
絶対位置スクリプトコードを取得
function GetPosition(obj)
{
var left = 0;
var top = 0;
while(obj != document.body)
{
left = obj.offsetLeft;
top = obj.offsetTop;
obj = obj.offsetParent;
}
alert("Left Is : " + left + "\r
" + "Top Is : " + top);
}オブジェクトの一番左からオブジェクトの現在のウィンドウに表示される範囲の左側までの距離です.
すなわち、横スクロールバーが発生した場合、スクロールバーが引いた距離です.
7.scrollTop
オブジェクトの最上部からオブジェクトの現在のウィンドウに表示される範囲の上端までの距離です.
つまり、縦スクロールバーが出現した場合、スクロールバーが引いた距離です.
私達はここで4種類のブラウザのDcument.bodyに対するclientHeight、offset HeightとscrollHeightの解釈を説明します.ここで言っているのはdocument.bodyです.HTMLコントロールなら、また違っています.ここをクリックして調べてください.
これらの4つのブラウザは、それぞれIE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)である.
clientHeight
clientHeightについては異論がありません.内容の可視領域の高さ、つまりページブラウザで内容が見えるこのエリアの高さは、一般的には最後のツールバー以下からステータスバー以上のこのエリアで、ページの内容とは関係がありません.
offset Height
IE、Operaはoffset Height=clientHeight+スクロールバー+フレームと考える.
NS、FFはoffset Heightがウェブページの内容の実際の高さだと思って、clientHeightより小さいことができます.
scrollHeight
IE、OperaはscrollHeightがウェブページの内容の実際の高さだと思って、clientHeightより小さいことができます.
NS、FFはscrollHeightはウェブページの内容の高さだと思っていますが、最小値はclientHeightです.
簡単に言えば
clientHeightはブラウザを通して内容を見るこのエリアの高さです.
NS、FFはoffset HeightとscrollHeightはすべてウェブページの内容の高さだと思っていますが、ウェブページの内容の高さがclientHeightに等しい時、scrollHeightの値はclientHeightで、offset HeightはclientHeightより小さいことができます.
IE、Operaは、offset Heightが可視領域clientHeightスクロールバーにフレームを付けると考えている.scrollHeightはウェブページの内容の実際の高度です.
同じ理屈
clientWidth、offset Width、scrollWidthの解釈は上記と同じで、高さを幅に置き換えるだけでよい.
END
//エピソード
デスクトップブラウザでスクロールバーの値を取得するには、document.scrollTopとdocument.scrollLeftで得られますが、iOSではこの2つの属性は未定義であることが分かります.なぜですか?iOSにはスクロールバーの概念がないので、Androidではこの2つの属性によってスクロールバーの値を正常に取得できますが、iOSではどのようにスクロールバーの値を取得しますか?window.scrollyとwindow.scrollXを通じて、現在のウィンドウのy軸とx軸スクロールバーの値を得ることができます.