在 JavaScript 中獲取視口尺寸
-
在 JavaScript 中使用
window.innerWidth
獲取視口寬度 -
在 JavaScript 中使用
document.documentElement.clientWidth
獲取視口寬度
瀏覽器視口
是可以檢視網頁內容的視窗區域。本文將學習如何在 JavaScript 中獲取 Viewport Dimension。
Javascript 提供了兩種方法來找出裝置的視口。
- 使用
window.innerWidth
和window.innerHeight
- 使用
document.documentElement.clientWidth
和.clientHeight
在 JavaScript 中使用 window.innerWidth
獲取視口寬度
視窗的只讀 innerWidth
屬性返回視窗的內部寬度(以畫素為單位)。這包括垂直滾動條的寬度
。
視窗的內部高度可以從 innerHeight
屬性獲得。
語法:
let intViewportWidth = window.innerWidth;
一個整數值表示視窗布局 viewport
的寬度(以畫素為單位)。此屬性沒有預設值並且是隻讀的。
要更改視窗的寬度,請使用視窗的方法之一來更改視窗的大小,例如 resizeBy()
或 resizeTo()
。
有關 window.innerWidth
的更多資訊。
function resizeEventListener() {
console.log("innerHeight",window.innerHeight);
console.log("innerWidth", window.innerWidth);
}
window.addEventListener("resize", resizeEventListener);
我們在調整瀏覽器視窗大小之前和之後計算視窗的內部高度和寬度。
要獲得減去滾動條和邊框的視窗寬度,請改用 clientWidth
屬性。結果可能因視窗而異。
輸出:
// Before resize
"innerHeight", 219
"innerWidth", 1326
// After resize
"innerHeight", 166
"innerWidth", 974
在 JavaScript 中使用 document.documentElement.clientWidth
獲取視口寬度
對於內聯專案和沒有 CSS 的元素,屬性 element.Clientwidth
為零;否則,它是以畫素為單位的元素的內部寬度。
包括內邊距,但不包括邊框、邊距和垂直滾動條。
當在根元素上使用 clientWidth
或文件處於 quirks mode
時,將返回視口的寬度,不包括滾動條。
語法:
var intElemClientWidth = element.clientWidth;
intElemClientWidth
是一個整數值,表示元素的 clientWidth
(以畫素為單位)。clientWidth
屬性是隻讀的。
更多資訊請見 element.clientWidth
。
function resizeEventListener() {
console.log("clientWidth", document.documentElement.clientWidth);
console.log("clientHeight", document.documentElement.clientHeight);
}
window.addEventListener("resize", resizeEventListener);
我們計算客戶的內部高度和寬度。
輸出:
// Before resize
"clientWidth", 1326
"clientHeight", 219
// After resize
"clientWidth", 974
"clientHeight", 166
要檢視結果,請單擊此處。
Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.
LinkedIn