JS取得畫面,瀏覽器視窗大小,網頁高度寬度(實作程式碼)_javascript技巧
網頁可見區域寬:document.body.clientWidth
網頁可見區域高:document.body.clientHeight
網頁可見區域寬:document.body.offsetWidth (包括邊線的寬)
網頁可見區域高:document.body.offsetHeight (包括邊線的寬)
網頁正文全文寬:document.body.scrollWidth
網頁正文全文高:document.body.scrollHeight
網頁被捲去的高: document.body.scrollTop
網頁被捲去的左:document.body.scrollLeft
網頁正文部分上:window.screenTop
網頁正文部分左:window.screenLeft
螢幕解析度的高:window.screen.height
螢幕解析度的寬度:window.screen.width
螢幕可用工作區高度:window.screen.availHeight
螢幕可用工作區寬度:window.screen.availWidth
HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 取得物件的滾動高度。
scrollLeft:設定或取得位於物件左邊界與視窗中目前可見內容的最左端之間的距離
scrollTop:設定或取得位於物件最頂端與視窗中可見內容的最頂端之間的距離
scrollWidth:取得物件的捲動寬度
offsetHeight:取得物件相對於版面或由父座標offsetParent 屬性指定的父座標的高度
offsetLeft:取得物件相對於版面或由offsetParent 屬性指定的父座標的計算左側位置
offsetTop:取得物件相對於版面或由offsetTop 屬性指定的父座標的計算頂端位置
event.clientX 相對文件的水平座標
event.clientY 相對文件的垂直座標
event.offsetX 相對容器的水平座標
event.offsetY 相對容器的垂直座標
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX document.documentElement.scrollTop 相對文件的水平座標垂直方向滾動的量
IE,FireFox 差異如下:
IE6.0、FF1.06 :
clientWidth = width padding
clientHeight = height padding
clientWidth = width - border
clientHeight = height - border offsetWidth = width Height = 🎜>offsetWidth = width Height = height
(需要提及:CSS中的margin屬性,與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)
網頁可見區域寬: document.body.clientWidth
網頁可見區域高: document.body. clientHeight
網頁可見區域高: document.body.offsetHeight (包括邊線的高)
網頁正文全文寬: document.body .scrollWidth
網頁正文全文高: document.body.scrollHeight
網頁被捲去的高: document.body.scrollTop
網頁被捲去的左: document.body.scrollLeft
文字部分上: window.screenTop
網頁正文部分左: window.screenLeft
螢幕解析度的高: window.screen.height
螢幕解析度的寬: window.screen.width
螢幕可用工作區高度: window.screen.availHeight
螢幕可用工作區寬度: window.screen.availWidth
---------------------」--
----
技術要點
本節程式碼主要使用了Document物件關於視窗的一些屬性,這些屬性的主要功能和用法如下。 要得到視窗的尺寸,對於不同的瀏覽器,需要使用不同的屬性和方法:若要偵測視窗的真實尺寸,在Netscape下需要使用Window的屬性;在IE下需要深入Document內部對body進行偵測;在DOM環境下,若要得到視窗的尺寸,需要注意根元素的尺寸,而不是元素。
Window物件的innerWidth屬性包含目前視窗的內部寬度。 Window物件的innerHeight屬性包含目前視窗的內部高度。
Document物件的body屬性對應HTML文件的標籤。 Document物件的documentElement屬性則表示HTML文件的根節點。
document.body.clientHeight表示HTML文件所在視窗的目前高度。 document.body. clientWidth表示HTML文件所在視窗的目前寬度。
實作程式碼
複製程式碼

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

WebSocket服務器返回401後瀏覽器無反應的處理方法在使用Netty開發WebSocket服務器時,經常會遇到驗證token的需求。 �...

關於JavaScript無法獲取用戶電腦硬件信息的原因探討在日常編程中,許多開發者會好奇為什麼JavaScript無法直接獲�...

關於JWT和Session的困惑與解答許多初學者在學習JWT和Session時,常常會對其本質和適用場景感到困惑。本文將圍繞J...

在Java中生成帶參數的微信小程序二維碼並將其顯示在HTML頁面上,是一個常見的需求。本文將詳細探討如何使用J...

USDT轉賬地址錯誤後,首先確認轉賬已發生,然後根據錯誤類型採取措施。 1.確認轉賬:查看交易記錄,獲取並在區塊鏈瀏覽器上查詢交易哈希值。 2.採取措施:若地址不存在,等待資金退回或聯繫客服;若為無效地址,聯繫客服並尋求專業幫助;若轉給了他人,嘗試聯繫收款方或尋求法律幫助。

註冊歐易賬戶的步驟如下:1.準備有效郵箱或手機號和穩定網絡。 2.訪問歐易官網。 3.進入註冊頁面。 4.選擇郵箱或手機號註冊,填寫信息。 5.獲取並填寫驗證碼。 6.同意用戶協議。 7.完成註冊並登錄,進行KYC和設置安全措施。

可以。兩個交易所之間可以互相轉幣,只要支持相同的幣種和網絡。步驟包括:1. 獲取收款地址,2. 發起提幣請求,3. 等待確認。注意事項:1. 選擇正確的轉賬網絡,2. 仔細核對地址,3. 了解手續費,4. 注意到賬時間,5. 確認交易所支持該幣種,6. 注意最小提幣數量。

歐盟MiCA合規認證,覆蓋50 法幣通道,冷存儲比例95%,零安全事件記錄。美國SEC持牌平台,法幣直購便捷,冷存儲比例98%,機構級流動性,支持大額OTC和自定義訂單,多級清算保護。
