Javascript實(shí)現(xiàn)獲取窗口的大小和位置代碼分享
更新時(shí)間：2014年12月04日 15:36:38 投稿：hebedich
這篇文章主要分享了一段Javascript實(shí)現(xiàn)獲取窗口的大小和位置代碼，兼容性非常好，這里推薦給大家
在Javascript中可以使用OuterWidth，OuterHeight 獲取瀏覽器的大小.用 innerWidth,innerHeight 來(lái)獲取窗口的大?。ǔg覽器邊框部分）。對(duì)于IE6 及之前版本，要區(qū)分是標(biāo)準(zhǔn)模式，還是混雜模式。標(biāo)準(zhǔn)模式使用document.documentElement.clientWidth，document.documentElement.clientHeight；混雜模式使用document.body 的clientWidth，clientHeight。
復(fù)制代碼 代碼如下:
(function () {
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
var broswerWidth = window.outerWidth;
var broswerHeight = window.outerHeight;
alert(pageWidth + " " + pageHeight);
alert(broswerWidth + " " + broswerHeight);
if (typeof pageWidth != "number") {
if (document.compatMode == "CSS1Compat") { //The standard mode
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
})();
獲取窗口的位置：IE，chrome，Safari，使用screenLeft，screenTop 來(lái)獲取窗口距離屏幕左邊和屏幕上邊的位置。而Firefox不支持此屬性，F(xiàn)irefox使用screenXP，screenY 達(dá)到同樣的效果。
復(fù)制代碼 代碼如下:
(function btnFun() {
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft :
window.screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop :
window.screenY;
alert(leftPos + " " + topPos);
//alert(window.screenLeft+" "+window.screenTop);
})();
相關(guān)文章
JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉查找樹的定義與表示方法
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉查找樹的定義與表示方法,簡(jiǎn)單講述了二叉查找樹的概念、特點(diǎn)及javascript針對(duì)二叉查找樹的創(chuàng)建、插入、遍歷等操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04
js對(duì)字符串和數(shù)字進(jìn)行加法運(yùn)算的一些情況
這篇文章主要介紹了js對(duì)字符串和數(shù)字進(jìn)行加法運(yùn)算的一些情況,需要的朋友可以參考下2023-02-02
微信小程序獲取用戶手機(jī)號(hào)碼詳細(xì)教程(前端＋后端)
在我們開發(fā)微信小程序時(shí),獲取用戶手機(jī)號(hào)碼是常見的需求之一,這篇文章主要給大家介紹了關(guān)于微信小程序獲取用戶手機(jī)號(hào)碼的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
Bootstrap 中的導(dǎo)航組件都依賴同一個(gè) .nav 類和ul，狀態(tài)類也是共用的。改變修飾類可以改變樣式。接下來(lái)通過(guò)本文給大家介紹bootstrap 導(dǎo)航組件使用方法，一起看看吧2017-01-01
通過(guò)js將內(nèi)容復(fù)制到剪貼板，本來(lái)不難，可是若考慮到瀏覽器的兼容性問題，就變的有點(diǎn)麻煩，借助flash實(shí)現(xiàn)瀏覽器的兼容2014-03-03
Javascript函數(shù)技巧學(xué)習(xí)
這篇文章主要介紹了Javascript函數(shù)技巧學(xué)習(xí)，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-07-07
JS自動(dòng)適應(yīng)的圖片彈窗實(shí)例
這篇文章介紹了JS自動(dòng)適應(yīng)的圖片彈窗實(shí)例代碼，有需要的朋友可以參考一下2013-06-06
在開發(fā)項(xiàng)目的過(guò)程中，我們經(jīng)常會(huì)需要關(guān)于javascript數(shù)組的一些算法，比方說(shuō)數(shù)組去重、數(shù)組求交集、數(shù)組擾亂等等。今天就把個(gè)人的匯總整理的算法分享給大家。2016-02-02
使用uni-app開發(fā)微信小程序的實(shí)現(xiàn)
這篇文章主要介紹了使用uni-app開發(fā)微信小程序的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
微信小程序?qū)崿F(xiàn)簡(jiǎn)單Tab切換效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單Tab切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05