目錄
首頁 web前端 js教程 JS 取得瀏覽器與螢幕寬高等資訊的實作思維及程式碼_javascript技巧

JS 取得瀏覽器與螢幕寬高等資訊的實作思維及程式碼_javascript技巧

May 16, 2016 pm 05:27 PM
js 瀏覽器

網頁可見區域寬: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
cli
offsetWidth = width padding border

offsetHeight = height padding border

IE5.0/5.5:
cli widm
>clientHeight = height - border

offsetWidth = width

offsetHeight = height

(我需要提一下:CSS中的margin屬性,與Heoffyidth、pidth、He無關)

-------------------


技術要點
本節程式碼主要使用了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文件所在視窗的目前寬度。


實作程式碼

複製程式碼 程式碼如下:

BR>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd">


請調整瀏覽器視窗



本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

Coinbase交易所登錄入口2025 Coinbase交易所登錄入口2025 Mar 21, 2025 pm 05:51 PM

Coinbase安全登錄指南:如何避免釣魚網站和詐騙? 網絡釣魚和詐騙日益猖獗,安全訪問Coinbase官方登錄入口至關重要。本文提供實用指南,幫助用戶安全地找到並使用Coinbase最新官方登錄入口,保護數字資產安全。我們將介紹如何識別釣魚網站,以及如何通過官方網站、移動應用或可信第三方平台安全登錄,並提供加強賬戶安全的建議,例如使用強密碼和啟用雙重驗證。 避免因錯誤登錄導致資產損失,請務必仔細閱讀本文!

歐易官方網站最新註冊入口 歐易官方網站最新註冊入口 Mar 21, 2025 pm 05:54 PM

歐易OKX作為全球領先的數字資產交易平台,以其豐富的交易產品、強大的安全保障和便捷的用戶體驗吸引眾多投資者。然而,網絡安全風險日益嚴峻,如何安全註冊歐易OKX官方賬戶至關重要。本文將提供歐易OKX官方網站最新註冊入口,並詳細講解安全註冊的步驟和注意事項,包括如何識別官方網站、設置強密碼、開啟雙重驗證等,幫助您安全便捷地開啟數字資產投資之旅。請注意,數字資產投資存在風險,請謹慎決策。

歐易交易所app國內下載教程 歐易交易所app國內下載教程 Mar 21, 2025 pm 05:42 PM

本文提供國內安全下載歐易OKX App的詳細指南。由於國內應用商店限制,建議用戶通過歐易OKX官方網站下載App,或使用官網提供的二維碼掃描下載。下載過程中,務必核實官網地址,檢查應用權限,安裝後進行安全掃描,並啟用雙重驗證。 使用過程中,請遵守當地法律法規,使用安全網絡環境,保護賬戶安全,警惕詐騙,理性投資。 本文僅供參考,不構成投資建議,數字資產交易風險自負。

登錄BitMEX交易所最新官方網站入口 登錄BitMEX交易所最新官方網站入口 Mar 21, 2025 pm 06:06 PM

本文提供安全可靠的指南,幫助用戶訪問BitMEX交易所的最新官方網站,並提升交易安全。由於監管和網絡安全威脅,識別BitMEX官方網站至關重要,避免釣魚網站竊取賬戶信息和資金。文章介紹了通過可信加密貨幣平台、官方社交媒體、新聞媒體以及訂閱官方郵件等方法查找官方網站入口,並強調了核對域名、使用HTTPS連接、檢查安全證書等安全提示,以及啟用雙重驗證、定期更改密碼的重要性。 記住,加密貨幣交易高風險,請謹慎投資。

幣安交易所app國內下載教程 幣安交易所app國內下載教程 Mar 21, 2025 pm 05:45 PM

本文提供安全可靠的幣安交易所App下載指南,幫助用戶解決在國內下載幣安App的難題。由於國內應用商店限制,文章推薦優先從幣安官網下載APK安裝包,並詳細介紹了官網下載、第三方應用商店下載以及朋友分享等三種方法,同時強調了下載過程中的安全注意事項,例如驗證官網地址、檢查應用權限、使用安全軟件掃描等。此外,文章還提醒用戶了解當地法律法規,注意網絡安全,保護個人信息,謹防詐騙,理性投資,安全交易。 文章最後再次強調,下載和使用幣安App需遵守當地法律法規,風險自負,不構成任何投資建議。

Coinbase交易所網頁版登錄入口 Coinbase交易所網頁版登錄入口 Mar 21, 2025 pm 05:48 PM

Coinbase交易所網頁版因其便捷性廣受歡迎,但安全訪問至關重要。本文旨在指導用戶安全登錄Coinbase官方網頁版,避免釣魚網站和黑客攻擊。 我們將詳解如何通過搜索引擎、可信第三方平台及官方社交媒體驗證官方入口,並強調檢查地址欄安全鎖、啟用雙重驗證、避免公共Wi-Fi、定期更改密碼及警惕釣魚郵件等安全措施,保障您的數字資產安全。 正確訪問Coinbase官方網站是保護您的數字貨幣的第一步,本文將助您安全開啟數字貨幣交易之旅。

BitMEX交易所最新官方網站入口 BitMEX交易所最新官方網站入口 Mar 21, 2025 pm 06:03 PM

BitMEX作為老牌加密貨幣衍生品交易平台,其官方網站入口的準確性至關重要。由於釣魚網站猖獗,誤入假冒網站可能導致賬戶被盜和資金損失。本文旨在指導用戶安全訪問BitMEX官方網站,提供通過可信加密貨幣信息平台(如CoinMarketCap、CoinGecko)、官方社交媒體、驗證現有地址及官方支持渠道等多種方法,並強調啟用雙重驗證、定期更改密碼及使用安全軟件等安全措施,幫助用戶有效規避風險,保障賬戶安全。

幣安在國內怎麼下載 幣安在國內怎麼下載 Mar 21, 2025 pm 05:33 PM

本文提供國內安全下載幣安App的指南,由於國內應用商店限制,直接下載較為困難。推薦通過幣安官方網站下載APK安裝包或掃描官網二維碼下載App,務必仔細核對官方域名,檢查應用權限,安裝後進行安全掃描,並啟用雙重驗證(2FA)。 下載及使用前請務必了解並遵守當地法律法規,數字資產交易風險較高,請謹慎操作。本文僅供參考,不構成投資建議,所有風險由用戶自行承擔。 關鍵詞:幣安, Binance, 下載, App, 國內, 安全, 教程, 數字貨幣, 加密貨幣

See all articles