Javascript實(shí)現(xiàn)獲取窗口的大小和位置代碼分享
更新時(shí)間：2014年12月04日 15:36:38 投稿：hebedich
這篇文章主要分享了一段Javascript實(shí)現(xiàn)獲取窗口的大小和位置代碼，兼容性非常好，這里推薦給大家
在Javascript中可以使用OuterWidth，OuterHeight 獲取瀏覽器的大小.用 innerWidth,innerHeight 來獲取窗口的大?。ǔg覽器邊框部分）。對于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 來獲取窗口距離屏幕左邊和屏幕上邊的位置。而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)文章
下面小編就為大家?guī)硪黄獪\談JavaScript find 方法不支持IE的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家詳細(xì)介紹了JS+Canvas繪制抽獎轉(zhuǎn)盤，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
JS端基于download.js實(shí)現(xiàn)圖片、視頻時(shí)直接下載而不是打開預(yù)覽
這篇文章主要介紹了JS端基于download.js實(shí)現(xiàn)圖片、視頻時(shí)直接下載而不是打開預(yù)覽,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了npm包全局安裝和局部安裝過程，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
本文給大家分享的是使用javascript實(shí)現(xiàn)判斷微信版本號以及判斷是否在內(nèi)置的微信瀏覽器中打開的代碼，十分的簡單實(shí)用，有需要的小伙伴可以參考下。2015-05-05
Immutable 在 JavaScript 中的應(yīng)用
在 JavaScript 中，對象是引用類型的數(shù)據(jù)，其優(yōu)點(diǎn)在于頻繁的修改對象時(shí)都是在原對象的基礎(chǔ)上修改，并不需要重新創(chuàng)建，這樣可以有效的利用內(nèi)存，不會造成內(nèi)存空間的浪費(fèi)，對象的這種特性可以稱之為 Mutable，中文的字面意思是「可變」2016-05-05
這篇文章主要介紹了JavaScript 上傳文件限制參數(shù)案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
javascript中定義變量const和var有什么區(qū)別詳解
這篇文章主要給大家介紹了關(guān)于javascript中定義變量const和var有什么區(qū)別的相關(guān)資料,在JavaScript中var和const都是用于聲明變量的關(guān)鍵字,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
這篇文章介紹了JavaScript屬性的操作，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
Bootstrap前端開發(fā)案例二，這篇文章能夠幫助大家更還好的進(jìn)行前端開發(fā)Bootstrap，相信大家會愛上Bootstrap2016-06-06