js實時獲取瀏覽器窗口大小TOP

知更鳥
知更鳥
知更鳥
1518
文章
6913
評論
2019年1月12日10:03:34來源:php.cn 1 1.7K

js實時獲取瀏覽器窗口大小,我們可以使用addEventListener()方法來實現。該addEventListener()方法可以注冊事件處理程序以偵聽瀏覽器窗口resize事件,例如window.addEventListener('resize', ...)。

<!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() 方法中,添加兩個參數,分別是“resize”,“displayWindowSize”。

第一個參數則是可以實時監聽窗口大小,當窗口每發生變化一次,就會調用第二參數即displayWindowSize函數。

繼續閱讀
weinxin
關于本站
分享交流WordPress經驗與技巧,關注前端設計與網站制作。僅用于功能演示。
知更鳥
最佳 CSS 框架 Web前端

最佳 CSS 框架

在構建網站時,使用 CSS 框架是一個實時的節省,因為它為您提供了每個網頁設計師和前端開發人員在制作網站時需要的工具。 CSS 框架是一個軟件框架,它允許使用 HTML/CSS 進行更簡單、更符合標準...
line-height安卓中不垂直居中 Web前端

line-height安卓中不垂直居中

設計響應式網頁,PC端和移動端的樣式兼容性,很讓人撓頭,最常見的就是文字垂直不居中,而且蘋果手機和安卓手機下表現也不盡相同,往往蘋果手機是垂直居中的,但在安卓機上字卻靠上了,總是差那么一像素,應該是安...
jQuery幻燈片插件:OWL Carousel Web前端

jQuery幻燈片插件:OWL Carousel

Owl Carousel 是一個強大、實用但小巧的 jQuery 幻燈片插件,它具有以下特點: 兼容所有瀏覽器 支持響應式 支持 CSS3 過度 支持觸摸事件 支持 JSON 及自定義 JSON 格式...
匿名

發表評論

匿名網友 填寫信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

評論:1   其中:訪客  1   博主  0
    • VEXS VEXS 4

      可以的 :wink: