ホームページ >ウェブフロントエンド >jsチュートリアル >Javascript のドラッグ アンド ドロップに関する一連の記事 2
JavaScript のドラッグで使用される位置決めに関連するいくつかのパラメーター
この記事を読む前に、JavaScript ドラッグ アンド ドロップ シリーズの記事 1 の最初の記事にある offsetParent 属性をご覧ください。ステップバイステップは良い習慣であり、奨励する価値があるからです。 IE では、このコードを実行すると、2 つのウィンドウが順にポップアップ表示され、それぞれ「p」と「437」が表示され、それぞれ offsetParent と offsetLeft を示します。下の図では、赤い枠線が Body 要素を表し、黒い枠線が p 要素を表します。これは、IE でも offsetParent が Body 要素ではなく、offsetLeft の計算が Body 要素に基づいていることを証明しています。 図 1: IE7 での結果 このバグは IE 8 Beta 1 で修正されており、それぞれ "p" と "411" を返します。すでに他のブラウザと同じ規格に準拠しています。 図 2: IETester での IE 8 Beta 1 のテスト結果 注: IETester は非常に優れた無料の Web ページ テスト ツールです。さまざまなバージョンの IE に代わって Web ページをレンダリングします。最新バージョン 0.2.3 は、公式 Web サイト http://www.php.cn/ からダウンロードできます。個人的には、すべての WEB 開発者は 1 つを持つべきだと思います。 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX< ;p id="sonObj">OffsetParent プロパティをテスト
それでは、今日の内容を見てみましょう。
まず、element.offsetLeft プロパティを見てみましょう。
サポートされているブラウザ: Internet Explorer 4.0、Mozilla 1.0、Netscape 6.0、Opera 7.0、Safari 1.0
定義: 現在の要素の左端から、offsetParent によって返されるオブジェクトの左端までを表すピクセル値を返します。プロパティのオフセット。
構文:
leftDis = element.offsetLeft
Internet Explorer の offsetLeft 属性の実装にはバグがあり、現在の要素の offsetParent 属性の値に関係なく、常に Body 要素が使用されます。 offsetLeft を計算するための参考として。幸いなことに、このバグは Internet Explorer 8 Beta 1 で修正されています。 IE は標準として Body 要素の Left-Border から OffsetLeft を計算しますが、他のブラウザは Left-Margin から計算することに注意することが重要です。
テストコード 1:
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/ TR/html4/strict.dtd">
<html>
<ヘッド>
<メタ http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<タイトル>無題のドキュメントタイトル>
<スタイル タイプ="text/css">
本文{
border:1px 赤一色;
左マージン:0px;
🎜 >{ 位置
:相対
; 左:25px;
上:0px;
border :1pxソリッドブラック}
スタイル>
<スクリプト タイプ
="text/javascript" 言語="JavaScript"> function offset_init(){
var pElement = document.getElementById("sonObj"); parentObj = pElement.offsetParent;
var ioffsetLeft=pElement.offsetLeft;
alert(parentObj.tagName);
alert(iオフセット左); }
スクリプト
>
ヘッド>
<ボディ onload
="offset_init()"> p id
="parent">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX span id
="sonObj">测试OffsetParent プロパティspan> p>
ボディ>
html>
インライン ラベル (offsetParent として) 内にラベル (現在の要素として) を埋め込む場合、コードは次のようになります: