jsはコントロールの位置とブラウザごとの違いを取得します_javascriptスキル

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

//座標位置を取得します
function getpos( e) {
var t=e.offsetTop;
var height=e.offsetHeight;
while(e=e.offsetParent) e.offsetTop;
l =e.offsetLeft;
}
}


obj は HTML コントロールであると仮定します。

obj.offsetTop は、先頭または上部コントロールからの obj の位置、整数、単位ピクセルを参照します。
obj.offsetLeft は、左または上のコントロールからの obj の位置、整数、単位ピクセルを参照します。
obj.offsetWidth は、obj コントロール自体の幅 (整数、単位ピクセル) を指します。
obj.offsetHeight は、obj コントロール自体の高さを表す整数、単位ピクセルです。

先ほどの「上または上」と「左または上」のコントロールについて説明します。

例:

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

;/div> ;


「送信」ボタンの offsetTop は、「送信」ボタンと「ツール」レイヤーの上端の間の距離を指します。 「ツール」レイヤーの上端。
「リセット」ボタンの offsetTop は、「リセット」ボタンと「ツール」レイヤーの上境界線の間の距離を指します。これは、その上端に最も近いのが「ツール」レイヤーの上境界線であるためです。

「送信」ボタンの offsetLeft は、「送信」ボタンと「ツール」レイヤーの左境界線との間の距離を指します。これは、その左に最も近いのが「ツール」レイヤーの左境界線であるためです。層。
「リセット」ボタンの offsetLeft は、「送信」ボタンの右端からの「リセット」ボタンの距離を指します。これは、その左に最も近いのが「送信」ボタンの右端であるためです。


offsetTop は先頭または外側の要素から HTML 要素の位置を取得できます。この 2 つの違いは次のとおりです。

1。そして、style.top は数値に加えて単位 px を持つ文字列を返します。
2. offsetTop は読み取り専用ですが、style.top は読み取り/書き込み可能です。
3. HTML 要素にトップ スタイルが指定されていない場合、style.top は空の文字列を返します。

offsetLeft と style.left、offsetWidth と style.width、offsetHeight と style.height にも同じことが当てはまります。

scrollHeight: オブジェクトのスクロールの高さを取得します。
scrollLeft: オブジェクトの左端とウィンドウ内に現在表示されているコンテンツの左端との間の距離を設定または取得します。
scrollTop: オブジェクトの最上端と最上端との間の距離を設定または取得しますウィンドウに表示されているコンテンツの
scrollWidth: オブジェクトのスクロール幅を取得します。
offsetHeight: レイアウトまたは offsetParent プロパティで指定された親座標を基準としたオブジェクトの高さを取得します。
offsetLeft:レイアウトまたは offsetParent プロパティで指定された親座標を基準としたオブジェクトの高さ 左位置の計算
offsetTop: レイアウトまたは offsetTop 属性で指定された親座標を基準とした計算されたオブジェクトの上部位置を取得します
event.clientX ドキュメントを基準とした水平座標
event.clientY ドキュメントを基準とした垂直座標

event.offsetX コンテナを基準とした水平座標
event.offsetY を基準とした垂直座標コンテナ
document.documentElement.scrollTop 垂直スクロールの値
event.clientX document.documentElement.scrollTop 相対 ドキュメントの水平座標の垂直スクロール量

上記は主に以下を指しますIE、FireFox の違いは次のとおりです:

コードをコピー コードは次のとおりです: IE6.0、FF1.06:

clientWidth = 幅パディング

clientHeight = 高さパディング
offsetWidth = 幅パディング境界
offsetHeight = 高さパディング境界
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height


( 言及する必要があります: CSS の margin 属性は何の関係もありませんclientWidth、offsetWidth、clientHeight、および offsetHeight)