JS PCページの特殊効果

    オフセット

    オフセット変換はオフセットであり、関連する属性を使用して要素の位置、サイズなどを動的に取得できます

    親要素からの要素距離を取得します

    要素自身のサイズ（高さの幅）を取得します

    注返される値には単位がありません

 

 

  オフセットの一般的な属性

1.     element.offsetTop（）は、要素の上端から親要素までの距離を返します。
2.     element.offsetLeft（）は、要素の左側から親要素までの距離を返します。
3.     element.offsetWidth（）は要素の幅を返します
4.     element.offsetHeight（）は要素の高さを返します
5.     element.offsetParent（）は、配置された要素の親要素を返します。親要素が配置されていない場合は、本文を返します

1      <div class = "box1"> </ div>
 2      <script>
 3          var box = document.querySelector（ '         。box1 ' ）
 4  console.log（box.offsetTop）;
5          console.log（box.offsetLeft）;
6          console.log（box.offsetWidth）;
7          console.log（box.offsetHeight）;
8          console.log（box.offsetParent）;
9      </ script>

    オフセットとスタイルの違い

    オフセットは任意のスタイルの要素値を取得でき、スタイルはインラインスタイルのスタイル値のみを取得できます

    オフセットで取得した値には単位がなく、スタイルで取得した値は単位付きです

    offsetWidthにはパディング、境界線、幅、スタイルが含まれます。幅にはパディングと境界線の値は含まれません

    offsetwidthプロパティは読み取り専用プロパティであり、取得のみ可能であり、割り当てることはできません。style.widthは、プロパティの値を変更できます

1      <script>
 2          var box = document.querySelector（ '         。box1 ' ）
 3  console.log（box.offsetWidth）;
4          console.log（box.style.width）;
5      </ script>

 

 

ケース

ボックス内のマウスの座標を取得します

CSSコード

1  .box {
 2              幅：200px;
3つの             高さ：200px;
4              背景色：ピンク;
5              ポジション：絶対;
            左6  ：100px;
7              トップ：100px;
8          }

1      <div class = "box"> </ div>
 2      <script>
 3          var box = document.querySelector（ '          。box ' ）
 4 box.addEventListener（ 'mousemove'、function （e）{
 5              var x = e。 pageX- this .offsetLeft;
 6              var y = e.pageY- this .offsetTop;
 7              this .innerHTML = 'x坐标是' + x + 'y坐标是' + y;
 8          }）
 9      </ script>