取得窗口大小 兼容所有瀏覽器的js代碼
更新時間：2011年08月09日 20:05:40 作者：
我們首先把window.innerWidth和window.innerHeight的值分別付給了pageWidth和pageHeight。
取得窗口大小的代碼：
var pageWidth = window.innerWidth,
var pageHeight = window.innerHeight;
if(typeof pageWidth != "number"){
if(document.compatMode == "number"){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
}else{
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
我們首先把window.innerWidth和window.innerHeight的值分別付給了pageWidth和pageHeight。然后檢查pageWidth中保存的是不是一個數(shù)值；如果不是，則通過document.compatMode來確定頁面是否處于標準模式。如果是，則分別使用document.documentElement.clientWidth和document.documentElement.clientHeight的值。否則，就使用document.body.clientWidth和document.body.clientHeight的值。
取得窗口位置的代碼：
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
這兩個例子目的是取得窗口左邊和上邊的位置，首先運用二元操作符判斷screenLeft屬性和screenTops屬性是否存在，如果存在（在IE、Safari、Opera和Chrome中），則取這兩個屬性的值。如果不存在（在Firefox中），則取screenX和screenY的值。
復制代碼 代碼如下:
var pageWidth = window.innerWidth,
var pageHeight = window.innerHeight;
if(typeof pageWidth != "number"){
if(document.compatMode == "number"){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
}else{
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
我們首先把window.innerWidth和window.innerHeight的值分別付給了pageWidth和pageHeight。然后檢查pageWidth中保存的是不是一個數(shù)值；如果不是，則通過document.compatMode來確定頁面是否處于標準模式。如果是，則分別使用document.documentElement.clientWidth和document.documentElement.clientHeight的值。否則，就使用document.body.clientWidth和document.body.clientHeight的值。
取得窗口位置的代碼：
復制代碼 代碼如下:
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
這兩個例子目的是取得窗口左邊和上邊的位置，首先運用二元操作符判斷screenLeft屬性和screenTops屬性是否存在，如果存在（在IE、Safari、Opera和Chrome中），則取這兩個屬性的值。如果不存在（在Firefox中），則取screenX和screenY的值。
相關文章
這篇文章主要為大家詳細介紹了js仿小米二級菜單顯示效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了javascript實現(xiàn)tab切換的兩個實例，是對之前方法原理的進一步延伸，需要深入了解的同學可以參考一下2015-11-11
最近的網(wǎng)站要求使用二級菜單，本著“能用別人的就用別人的，不能用別人的就用自己的”的原則，在網(wǎng)上找到一個經(jīng)典的使用CSS制作的二級菜單，感覺不錯，先記錄下來，以備它用。2009-06-06
防止xss和sql注入:JS特殊字符過濾正則，需要的朋友可以參考一下2013-04-04
這篇文章主要給大家介紹了關于對async?await效率問題的深入思考,async和await要搭配Promise使用,它進一步極大的改進了Promise的寫法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-01-01
本文通過實例代碼給大家介紹了JS中定位 position 的使用，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-08-08
JavaScript canvas實現(xiàn)雪花隨機動態(tài)飄落
這篇文章主要為大家詳細介紹了JavaScript canvas實現(xiàn)雪花隨機動態(tài)飄落，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
JavaScript用Number方法實現(xiàn)string轉(zhuǎn)int
parseInt方法在format'00'開頭的數(shù)字時會當作2進制轉(zhuǎn)10進制，所以建議string轉(zhuǎn)int最好用Number方法2014-05-05
這篇文章主要介紹了javascript計算漸變顏色的實例的相關資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了JavaScript基于面向?qū)ο笾^承，感興趣的小伙伴們可以參考一下2015-12-12