国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
當前位置: 首頁 - 科技 - 知識百科 - 正文

js獲取瀏覽器的可視區域尺寸的實現代碼_javascript技巧

來源:懂視網 責編:小采 時間:2020-11-27 21:01:30
文檔

js獲取瀏覽器的可視區域尺寸的實現代碼_javascript技巧

js獲取瀏覽器的可視區域尺寸的實現代碼_javascript技巧:測試例子: 代碼如下: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
推薦度:
導讀js獲取瀏覽器的可視區域尺寸的實現代碼_javascript技巧:測試例子: 代碼如下: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

測試例子:
代碼如下:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">











結果:

chrome:


FF

OPERA:

SAFARI:

IE9:

IE8

IE7:

IE6

說明:

Chrome/FF/Safari/opera
對這些瀏覽器而言,window有個屬性innerWidth/innerHeight包含的是整個文檔的可視區域尺寸,注意,這個尺寸是包含滾動條大小的。
如果我們不計滾動條的影響,就可以直接使用這兩個屬性。
如果滾動條會影響(比如最大化彈出框),那么應該想另外的辦法。

Document對象是每個DOM樹的根,但是它并不代表樹中的一個HTML元素,document.documentElement屬性引用了作為文檔根元素的html標記,document.body屬性引用了body標記
我們這里獲取常見的三個值(scrollWidth、offsetWidth和clientwidth)來比較一下

document.documentElement.scrollWidth返回整個文檔的寬度
document.documentElement.offsetWidth返回整個文檔的可見寬度
document.documentElement.clientwidth返回整個文檔的可見寬度(不包含邊框),clientwidth = offsetWidth - borderWidth
不過一般來說,我們不會給document.documentElement來設置邊框,所以這里的clientwidth 與 offsetWidth一致

document.body.scrollWidth返回body的寬度
注意,這里的scrollWidth有個不一致的地方,基于webkit的瀏覽器(chrome和safari)返回的是整個文檔的寬度,也就是和document.documentElement.scrollWidth一致,
opera和FF返回的就是標準的body 的scrollWidth,個人覺得opera和FF算是比較合理的。
document.body.offsetWidth返回body的offsetWidth
document.body.clientwidth返回body的clientwidth(不包含邊框),clientwidth = offsetWidth - borderWidth

我們看上面的例子,會發現body和documentElement的有些值是相等的,這并不是表示他們是等同的。而是因為當我們沒有給body設置寬度的時候,document.body默認占滿整個窗口寬度,于是就有:
document.body.scrollWidth = document.documentElement.scrollWidth
document.body.offsetWidth = document.documentElement.offsetWidth
document.body.clientwidth = document.documentElement.clientwidth - document.body.borderWidth(body的邊框寬度)
當我們給body設置了一個寬度的時候,區別就出來了。

IE9/IE8
這兩個差不多,唯一的區別是IE9包含window.innerWidth屬性,而IE8不包含window.innerWidth屬性。
document.documentElement.scrollWidth返回整個文檔的寬度,和FF等瀏覽器一致
document.documentElement.offsetWidth返回整個文檔的可見寬度(包含滾動條,值和innerWidth一致),注意,這里和FF等瀏覽器又有點區別。
document.documentElement.clientwidth返回整個文檔的可見寬度(不包含邊框),和FF等瀏覽器一致。clientwidth = offsetWidth - 滾動條寬度

document.body.scrollWidth返回body的寬度,注意,這里的scrollWidth和FF等瀏覽器有點區別,這里并不包括body本身的border寬度。
因此例子中,相比FF少了10px。
document.body.offsetWidth返回body的offsetWidth,和FF等瀏覽器一致
document.body.clientwidth返回body的clientwidth(不包含邊框),和FF等瀏覽器一致,clientwidth = offsetWidth - borderWidth

IE7
IE7與IE9/IE8的主要區別是
第一、document.documentElement.offsetWidth的返回值不一樣,
參見上面說的,IE9/IE8的document.documentElement.offsetWidth包含滾動條,但是,IE7的document.documentElement.offsetWidth不包含滾動條。
第二、document.documentElement.scrollWidth返回整個文檔的寬度,注意,這里和IE9/IE8、FF等瀏覽器又有不一致,對于IE9/IE8、FF等瀏覽器,scrollWidth最小不會小于窗口的寬度,但是在IE下沒有這個,文檔有多小,這個就有多小
其他倒是挺一致的。

最后是IE6了
IE6的document.documentElement返回值與IE9/IE8沒有區別(由此可見,對于document.documentElement,IE7就是個奇葩)。
話說回來,IE的document.body就是個奇葩,當沒有給body設置寬度的時候,body是默認占滿整個文檔的(注意,其他的瀏覽器都是占滿整個窗口),當然,最小值是整個窗口的大小,就是說body指向了根元素。
因此,在算上IE6在解析width方面的bug,和其他的瀏覽器的區別就淋漓盡致了。
document.body.scrollWidth返回body的寬度,和IE9/IE8/IE7一致
document.body.offsetWidth返回body的offsetWidth,注意,由于body的不同,這里的offsetWidth = scrollWidth + borderWidth
document.body.clientwidth返回body的clientwidth(不包含邊框)clientwidth = offsetWidth - borderWidth
另外,有一點和IE7同樣,就是document.documentElement.scrollWidth沒有最小寬度。

總結一下,在標準模式下,我們獲取文檔可見區域的方法如下:
代碼如下:
function getViewSizeWithoutScrollbar(){//不包含滾動條
return {
width : document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
function getViewSizeWithScrollbar(){//包含滾動條
if(window.innerWidth){
return {
width : window.innerWidth,
height: window.innerHeight
}
}else if(document.documentElement.offsetWidth == document.documentElement.clientWidth){
return {
width : document.documentElement.offsetWidth,
height: document.documentElement.offsetHeight
}
}else{
return {
width : document.documentElement.clientWidth + getScrollWith(),
height: document.documentElement.clientHeight + getScrollWith()
}
}
}

getScrollWith()是獲取滾動條尺寸,參見
http://www.gxlcms.com/article/29036.htm
有什么錯誤歡迎指出

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

js獲取瀏覽器的可視區域尺寸的實現代碼_javascript技巧

js獲取瀏覽器的可視區域尺寸的實現代碼_javascript技巧:測試例子: 代碼如下: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
推薦度:
標簽: 瀏覽器 大小 js
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top 主站蜘蛛池模板: 亚洲欧美色图 | 精品久久综合一区二区 | 国产日韩欧美中文 | 国产成人精品日本亚洲语音1 | 91精品一区二区三区在线播放 | 国产一区二区精品久久凹凸 | 亚洲欧洲日产国码一级毛片 | 欧美91精品久久久久网免费 | 欧美日韩在线精品一区二区三区 | 萌白酱喷水 | 久久首页 | 中文字幕第4页 | 最新国产在线 | 91资源在线播放 | 香蕉视频日本 | 亚洲欧美中文字幕 | 韩日视频在线 | 99久久免费国产精精品 | 国产区网址 | 欧美精品一区二区在线观看播放 | 国产精品人成 | 欧美成人伊人久久综合网 | 久久成人国产精品免费 | 国产美女精品久久久久中文 | 国产一区二区三区精品视频 | 91久久精品 | 欧美激情伊人 | 国产一级视频在线观看 | 成人一级免费视频 | 国产一区二区精品 | 日韩二区三区 | 99久久国产亚洲综合精品 | 中文字幕第7页 | 国模吧双双大尺度炮交gogo | 亚洲欧美日韩精品久久久 | 久久精品一区二区三区不卡牛牛 | 亚欧美| 免费又黄又爽又猛大片午夜 | 免费一看一级毛片全播放 | 国产精品高清一区二区 | 美女网站一区二区三区 |