div ボックス モデル (百聞は一見に如かず)_html/css_WEB-ITnose

offsetLeft は親オブジェクトを基準とした左マージンを取得します

left は位置属性を使用して親オブジェクトを基準とした左マージンを取得または設定します (位置は相対として定義されます)

親オブジェクトの場合div の位置が相対として定義され、子 div の位置が絶対として定義されている場合、子 div の style.left の値は親 div の値に対して相対的です。
これは offsetLeft と同じです、違いは
1. style.left の戻り値 28px などの文字列の場合、offsetLeft は値 28 を返します。取得した値を計算する必要がある場合は、offsetLeft を使用する方が便利です。
2. style.left は読み取り/書き込み可能で、offsetLeft は読み取り専用なので、div の位置を変更するには、style.left を変更するだけです。
3. style.left の値を事前に定義する必要があります。定義されていない場合、取得される値は空になります。そして、それをHTMLで定義する必要があります。
cssで定義されている場合、style.leftの値はまだ空です。これは最初に遭遇した問題であり、styleの値を取得することはできません。左。

offsetLeft は、事前に div の位置を定義しなくても取得できます。