Web APIs中螢幕（Screen）、視窗（Window）、元素（Element）中的高度、寬度、滾動條總結

阿新 • • 發佈：2018-12-01

1 screen

// 螢幕：1440 * 900
screen.height	// 1440
screen.width	// 900

// 雙螢幕，根據主螢幕位置和工作列位置，值會變化
// 這裡，左側為主螢幕（1366 * 768），工作列垂直放置在主螢幕右側
screen.availHeight	// 1400
screen.availWidth	// 900
screen.availLeft	// 1366, 左邊螢幕的width
screen.availTop		// 0

2 window

瀏覽器視窗，screenX/Y outer/innerHeight/Width

// window縮放後，值會變化
window. 
screenX		// 1500, 包括左側螢幕
window.screenY		// 100

// chrome有，firefox沒有，DOM標準裡也沒有
window.screenLeft	// = screenX
window.screenTop	// = screenY

// 視窗高度（包括選單欄、位址列、收藏欄、狀態列等），window縮放後，值會變化
window.outerHeight	// 900
window.outerWidth	// 1440

// 頁面可用高度（不包含選單欄、位址列、收藏欄、狀態列等），window縮放後，值會變化
// 包含滾動條
window.innerHeight	// 781
window.innerWidth	// 1440

滾動條（scroll）

<html style="height: 1000px; width: 1600px;">
<html>

// document滾動的水平和垂直距離
window.scrollX		// 100
window.scrollY		// 200

window.pageXOffset	// window.scrollX的別名
window.pageYOffset	// window.scrollY的別名

// 到邊界處不在滾動
window.scrollBy(100, 200)
window.scrollTo(100, 200)

3 Element

<div 
 id="main" style="height: 200px; width: 200px; overflow: scroll; padding: 20px;
 	border: solid black 20px; background: red;">
</div>

height width

let m = document.querySelector('#main')
let ms = window.getComputedStyle(m)

m.style.height		// "200px"
m.style.width = "300px"		// 直接改變

// 不包含滾動條，等於m.clientHeight
ms.height		// "183px"
ms.width = "300px"		// 直接改變

clientHeight/Width/Left/Top

// 以下屬性只讀（read-only）
// the inner height/width of the element
m.clientHeight		// 183
m.clientWidth		// 183

// the width of the left/top border
m.clientLeft		// 20
m.clientTop			// 20

滾動條（scroll）

// 滾動條（scroll）緊貼邊框（border），佔用元素內部寬高（clientWidth），不佔用padding的寬度
// the scroll view height/width of the element
m.scrollHeight		// 223 = clientHeight + borderWidth * 2
m.scrollWidth		// 223

// scroll的水平和滾動距離，滾動方法
m.scrollLeft
m.scrollTop
m.scrollTo(10, 20)
m.scrollBy(10, 20)

Web APIs中螢幕（Screen）、視窗（Window）、元素（Element）中的高度、寬度、滾動條總結

1 screen // 螢幕：1440 * 900 screen.height // 1440 screen.width // 900 // 雙螢幕，根據主螢幕位置和工作列位置，值會變化 // 這裡，左側為主螢幕（1366 * 768），工作列垂直放置在主螢幕右側 screen.a

【html、CSS、javascript-10】jquery-操作元素（屬性CSS和文檔處理）

dom javascrip fun 實用 code color () 進行 java 一、獲得內容-text、html、val() 三個簡單實用的用於 DOM 操作的 jQuery 方法： text() - 設置或返回所選元素的文本內容 html() - 設置或返回所選元

leetcode（83）—— 刪除已排序連結串列重複元素（Remove Duplicates from Sorted List）

思路：維護兩指標（ListNode *p1, ListNode *p2，p2 始終指向 p1 的next），分別指向當前節點值和下一個節點，如果當前節點的值等於下一個節點的值，則…，如果不相等，則…

android獲得螢幕高度和寬度、狀態列高度

android獲取螢幕的高度和寬度用到WindowManager這個類，兩種方法： WindowManager wm = (WindowManager) getContext()

關於tab頁巢狀datagrid高度、寬度適應滾動條問題

如標題所示：就是我在tab頁面中嵌套了相應的頁面(B.jsp) B.jsp頁面中有datagrid列表進行展示，但是現在有個問題就是說，當我的datagrid列數比較多的時候，datagrid只有一條記錄的時候，會出現橫向滾動條會把那一條展示的記錄給覆蓋掉了，如果是多條記錄的話是不會出現這個問題因為網

Web前端面試指導(十四)：如何居中一個元素（正常、絕對定位、浮動元素）?

web前端題目點評這道題目的提問比較多，連續問了三個問題，正常元素、絕對定位元素、互動元素如何居中，而且居中沒有說清楚是垂直居中還是水平居中，要回答清楚這個問題，必須得有深厚的功底，而且要分類的來回答，條理要清楚。可以先把水平居中各種情況說清楚，然後在把垂直居中說清楚。（一）元素水平居中的方式1）行級元素水平

JavaScript中變量、作用域和內存問題（JavaScript高級程序設計第4章）

外部對象的引用 pan object 揮手 fun 可用內存限制 argument 一、變量（1）ECMAScript變量肯能包含兩種不同的數據類型的值：基本類型值和引用類型值。基本類型值指的是簡單的數據段，引用類型值指那些可能由多個值構成的對象。（2）基本數據類型

使用 Swagger 自動生成 ASP.NET Core Web API 的文檔、在線幫助測試文檔（ASP.NET Core Web API 自動生成文檔）

地址 .cn 名稱 cor 生成文檔 def pos 構建回車對於開發人員來說，構建一個消費應用程序時去了解各種各樣的 API 是一個巨大的挑戰。在你的 Web API 項目中使用 Swagger 的 .NET Core 封裝 Swashbuckle 可以幫助你創建良好

Servlet中的request對象、重定向和轉發的差別（6）

current https 命令相對 eba 進入 file before redirect 1.這裏所說的request對象指的是HttpServletRequest對象，它代表client的請求，當client通過HTTP協議訪問server時。HTTP請求頭

設計演算法將一個帶頭結點的單鏈表A分解為兩個具有相同結構的連結串列B和C，其中B表的結點為A表中值小於零的結點，而C表的結點為A表中值大於零的結點（連結串列A中的元素為非零整數，要求B、C表利用A表的結點）。

語言：C++ #include <iostream> using namespace std; typedef struct LNode { int data; LNode *next; }LNode,*LinkList; //建立連結串列 int CreateList(Li

【演算法】二叉樹前序、中序、後序遍歷相互求法（轉）

二叉樹前序、中序、後序遍歷相互求法原文地址今天來總結下二叉樹前序、中序、後序遍歷相互求法，即如果知道兩個的遍歷，如何求第三種遍歷方法，比較笨的方法是畫出來二叉樹，然後根據各種遍歷不同的特性來求，也可以程式設計求出，下面我們分別說明。

python中呼叫R語言通過rpy2 進行互動安裝配置詳解（R_USER、R_HOME配置）

python中呼叫R語言通過rpy2 進行詳解文章目錄 python中呼叫R語言通過rpy2 進行詳解 1.R語言的安裝： 2.Rpy2工具的安裝和配置 3.pycharm中使用R語言配置

Web APIs中Location、URL和URLSearchParams介面

1 Location Interface The Location interface represents the location (URL) of the object it is linked to. Changes done on it are reflected on t

JAVA WEB快速入門之通過一個簡單的Spring專案瞭解Spring的核心（AOP、IOC）

接上篇《JAVA WEB快速入門之從編寫一個JSP WEB網站了解JSP WEB網站的基本結構、除錯、部署》，通過一個簡單的JSP WEB網站了解了JAVA WEB相關的知識，比如：Servlet、Fitler、Listner等，這為後面搭建基於SSM的框架奠定了基礎知識，當然光了解JSP相關的知識還不行，我

《OpenCV3程式設計入門》——5.1.5 訪問影象中畫素的三類方法（指標訪問、迭代器iterator、動態地址計算配合at元素）

目錄 1、指標訪問畫素 2、迭代器操作畫素 3、動態地址計算 OpenCV中，有三種方式訪問影象畫素：指標訪問：C操作符[]；迭代器iterator 動態地址計算上述方法在訪問速度上略有差異。debug模式下，

已知中序、後序構造二叉樹（關鍵詞：二叉樹/前序/先序/中序/後序/先根/中根/後根/遍歷/搜尋/查詢）

已知中序、後序構造二叉樹遞迴演算法 def buildTree(inorder, postorder): if inorder and postorder: postRootVal = postorder

如何做好一分半鐘的演講---目的：在一分半中的時間裡，如何向客戶介紹自己的專案（專案有意義、值得做）

如何做好一分半鐘的演講—目的：在一分半中的時間裡，如何向客戶介紹自己的專案（專案有意義、值得做） (一) 以新聞、某事件或者故事匯入，吸引客戶的興趣選擇的新聞、故事要以簡潔的方式講出來，最好是一兩句話，因為這只是一個引子，話太多不僅不能突出重點，而且浪費時間。

Python獲取一段文章中字母出現頻率前5的字母以及個數（去除空格、換行符等，只算字母）

import time,re from collections import Counter text = 'A friend of mine named Paul received an automobile from his brother as Christmas present.

C++ 單鏈表基本操作分析與實現連結串列　　連結串列是一種物理儲存單元上非連續、非順序的儲存結構，資料元素的邏輯順序是通過連結串列中的指標連結次序實現的。連結串列由一系列結點（連結串列中每一個元素稱為結點）組成，結

連結串列　　連結串列是一種物理儲存單元上非連續、非順序的儲存結構，資料元素的邏輯順序是通過連結串列中的指標連結次序實現的。連結串列由一系列結點（連結串列中每一個元素稱為結點）組成，結點可以在執行時動態生成。每個結點包括兩個部分：一個是儲存資料元素的資料域，另一個是儲存下一個結點地址的指標域。相比於線性表

9.螢幕寬高比判斷（Screen.width，Screen.height）

1.螢幕寬高比判斷 #if UNITY_EDITOR using UnityEditor; #endif using UnityEngine; namespace QFramework { public class JudgeScreenWidthAndHeight : M

Web APIs中螢幕（Screen）、視窗（Window）、元素（Element）中的高度、寬度、滾動條總結

1 screen

2 window

3 Element

相關推薦