js_javascriptスキルにおけるスクロールとオフセットを使用した比較の例と分析

1.offsetTop :
現在のオブジェクトから親レイヤーの上部までの距離。
オブジェクトからページの上部までの距離を設定するには、次を使用してください。 style.top 属性。

2.offsetLeft :
現在のオブジェクトとその親レイヤーの左側の間の距離。
オブジェクトとページの左側部分の間の距離を設定するには、値を割り当てることはできません。 style.left 属性を使用してください。

3.offsetWidth :
現在のオブジェクトの幅
プロパティと style.width プロパティの違いは、ページが大きくなるかどうかに関係なく、オブジェクトの幅がパーセント幅に設定されているかどうかです。以下、style.width どちらもこのパーセンテージを返しますが、offsetWidth はパーセンテージ値の代わりに、別のページのオブジェクトの幅の値を返します

4.offsetHeight:
と style.height プロパティの違いは、オブジェクトの幅が高さのパーセンテージに設定されている場合、ページが大きくなるか小さくなるかに関係なく、style.height はこれを返すことです。パーセンテージ、offsetHeight はパーセンテージ値の代わりに、別のページのオブジェクトの高さの値を返します

5.offsetParent :
現在のオブジェクトの上位レイヤー オブジェクト。
注: オブジェクトが DIV に含まれている場合、この DIV はこのオブジェクトの上位レイヤーとは見なされません。オブジェクトの上位レイヤー (レイヤーは DIV オブジェクトをスキップします) 上位レイヤーが Table の場合は問題ありません。
この属性を使用すると、さまざまなサイズのページ内の現在のオブジェクトの絶対位置を取得できます。

6.scrollLeft :
現在のウィンドウに表示されている範囲内で、オブジェクトの左端からオブジェクトの左側までの距離。
つまり、水平スクロールバーが表示されるときに、スクロールバーが引っ張られる距離です。

7.scrollTop
現在のウィンドウに表示されている範囲内のオブジェクトの上部からオブジェクトの上端までの距離。
つまり、垂直スクロール バーが表示されるときに、スクロール バーが引っ張られる距離です。

【コード】offsetTopとscrollTopをテストするHTMLコード

コードをコピー コードは次のとおりです:

   

   

       

           

               

this is test!

           

           
       

       

           

               

this is test!

           

           
       

       

           

               

this is test!

gt;

click1結果：





• ＆lt; li id = "li4"＆gt;＆lt;/li＆gt;
  ＆lt;/ul＆gt;
  ＆lt; ul＆gt; click2 "li5">





< ;li id="li8">

click3结果：







• < ;/li>
  

上は自己検査用のコードであり、直接検査できます。