動的なピクセル完璧な Web ページ デザインを作成するには、ウィンドウ サイズの測定を理解して使用することが非常に重要です。ウィンドウの測定が正しく行われていない場合、または正しく使用されていない場合、目的の Web ページ レイアウトが生成されない場合があります。残念ながら、HTML/CSS には、ウィンドウの画面サイズと元の画面境界からのウィンドウの距離に関する正確な情報を取得するための属性やプロパティが提供されていませんでした。
幸いなことに！ JavaScript は、「 window.screenLeft」と「window.screenTop」 」プロパティを使用して、両方のウィンドウの位置を測定します。 x 軸と y 軸 ' それぞれ。この記事の主な焦点は、「 ウィンドウ.スクリーン左 ' 財産。それでは、始めましょう!
このブログでは、JavaScript で window.screenLeft プロパティを使用またはアクセスする手順を説明します。
JavaScript で「window.screenLeft」プロパティにアクセスするにはどうすればよいですか?
” ウィンドウ.スクリーン左 JavaScript のプロパティは、画面に対するウィンドウの水平位置に関する情報を返します。このプロパティは、画面からウィンドウまでの水平距離を示す数値をピクセル形式で返します。以下のコードにアクセスしてください。 ウィンドウ.スクリーン左 ” プロパティが活用されています:
< 体 >
< h1 スタイル = 「色: シーグリーン;」 > Linux < / h1 >
< p ID = '目標' > < / p >
< 脚本 >
let i = window.screenLeft;
document.getElementById('target').innerHTML = '左: ' + i;
< / 脚本 >
< / 体 >
上記のコードの説明:
- まず、HTML「 p ” 要素は、” の ID で作成されます。 目標 ”。
- 次に、「 ウィンドウ.スクリーン左 ”プロパティは「<」内で使用されます。 脚本 >”タグを追加し、結果を変数”に格納します 私 ”。
- 次に、ID が「」の要素を選択します。 目標 ' の値を挿入します。 「 「i」変数を使用して「 内部HTML ' 財産。
Web ページのプレビューは次のとおりです。
出力は、画面の左境界からの水平距離が 0 ピクセルであることを示しています。
例: 水平方向の値を動的に取得する
screenLeft プロパティは、「 サイズ変更 」イベント リスナーを使用して、画面に対応するウィンドウの x 軸に沿ったリアルタイムの位置を提供します。同様に、y 軸または垂直軸に沿った位置も「」を利用して取得できます。 window.screenTop ' 財産。与えられたシナリオのコードを考えてみましょう。
< 体 >< h1 スタイル = 「色: シーグリーン;」 > Linuxヒント< / h1 >
< p ID = 'テスト' >< / p >
< 脚本 >
動的関数 ( ） {
させてください = window.screenLeft;
させてください = window.screenTop;
document.getElementById ( 'テスト' ） .innerHTML = 「左方向からの位置：」 + 私 + '、上方向から: ' + j;
}
window.addEventListener ( 「サイズ変更」 、ダイナミック ） ;
< / 脚本 >
上記のコードの説明は次のとおりです。
- まず、「」というIDを持つターゲット要素が作成されています。 テスト ”。
- 次に、「< 脚本 >」タグが使用されており、「 動的 ()」関数がその中に作成されます。
- 関数内では「」を利用します。 window.screenLeft」と「window.screenTop」 ” プロパティを作成し、” に保存します 「私」と「j」 ” 変数をそれぞれ指定します。
- その後、IDを取得して対象の要素を選択します。 テスト 」そして「」の助けを借りて 内部HTML ” プロパティには両方の値が表示されます。” 「私」と「j」 」変数を Web ページ上で確認します。
- 最後に「」を付けてください。 サイズ変更 ”イベントリスナーと” 窓 ”を呼び出す” 動的 ()」はウィンドウサイズが変更されるたびに機能します。
コンパイル終了後の Web ページのプレビュー:
上記の出力では、ウィンドウのサイズが変更されると、上側と左側からのウィンドウの差がピクセル単位で受信されます。
「」については以上です。 window.screeLeft JavaScript のプロパティ。
結論
「」にアクセスするには ウィンドウ.スクリーン左 JavaScript で「」プロパティを追加し、「 サイズ変更 ” イベントリスナーから” 窓 ”。これにより、ウィンドウのサイズが変更されるたびにコールバック関数が呼び出されます。この関数内で、「 ウィンドウ.スクリーン左 ' 財産。さらに、対象の要素の参照を取得し、その上にこの変数の値を表示します。このブログでは、JavaScript で window.screenLeft プロパティにアクセスするプロセスを説明しました。