ホームページ 毎日のプログラミング HTMLの知識 jsを使ってブラウザのウィンドウサイズをリアルタイムで取得する方法

jsを使ってブラウザのウィンドウサイズをリアルタイムで取得する方法

Dec 19, 2018 pm 03:33 PM

js はブラウザ ウィンドウのサイズをリアルタイムで取得します。これを実現するには、addEventListener() メソッドを使用します。 addEventListener() メソッドは、window.addEventListener('resize', ...) などのブラウザ ウィンドウのサイズ変更イベントをリッスンするイベント ハンドラーを登録できます。

jsを使ってブラウザのウィンドウサイズをリアルタイムで取得する方法

以下では、ブラウザのウィンドウ サイズ をリアルタイムで取得する js メソッドを、具体的なコード例に基づいて紹介します。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>js实时获取浏览器窗口大小示例</title>
</head>
<body>
<div id="result"></div>
<script>
 // 定义事件侦听器函数
 function displayWindowSize(){
        // 获取窗口的宽度和高度,不包括滚动条
 var w = document.documentElement.clientWidth;
 var h = document.documentElement.clientHeight;

 // 在div元素中显示结果
 document.getElementById("result").innerHTML = "宽: " + w + ", " + "高: " + h;
 }

    // 将事件侦听器函数附加到窗口的resize事件
 window.addEventListener("resize", displayWindowSize);

 // 第一次调用该函数
 displayWindowSize();
</script>
</body>
</html>
ログイン後にコピー

上記のコードでは、displayWindowSize 関数をカスタマイズして、(clientWidth プロパティと clientHeight プロパティを通じて) ウィンドウの幅と高さを取得し、 addEventListener() メソッド、追加 2 つのパラメータは、「resize」と「displayWindowSize」です。

最初のパラメータは、ウィンドウ サイズをリアルタイムで監視でき、ウィンドウが変更されるたびに、2 番目のパラメータ、displayWindowSize 関数が呼び出されます。

以下に示すように、現在の通常のブラウザ ウィンドウ サイズを取得します。

jsを使ってブラウザのウィンドウサイズをリアルタイムで取得する方法

ブラウザ ウィンドウを縮小すると、次のようにサイズを取得します。

jsを使ってブラウザのウィンドウサイズをリアルタイムで取得する方法

#ウィンドウを縮小した後は更新する必要はなく、取得したサイズがリアルタイムに表示されます。

: EventTarget.addEventListener() メソッドは、オブジェクトが指定されたイベント、指定されたコールバックをトリガーすると、指定されたリスナーを EventTarget に登録します。関数が実行されます。イベント ターゲットには、ドキュメント要素 ElementDocumentWindow、またはイベントをサポートするその他のオブジェクト (XMLHttpRequest など) を指定できます。

この記事は、js を使用してブラウザのウィンドウ サイズをリアルタイムに取得する具体的な方法について説明したもので、困っている友人の役に立てば幸いです。

以上がjsを使ってブラウザのウィンドウサイズをリアルタイムで取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)