成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

網(wǎng)頁與瀏覽器窗口の真理

tinysun1234 / 1125人閱讀

摘要：參考資料首先，網(wǎng)頁大小與瀏覽器窗口大小從來都不是一回事這尼瑪最近才明白，坑所以，要知道以下常網(wǎng)頁的范圍我們在代碼里面設(shè)置的或者腳本，改變的樣式就是網(wǎng)頁范圍下的改變，也就是說，我們設(shè)置的大小是網(wǎng)頁的不是瀏覽器窗口的大小。

參考資料

首先，網(wǎng)頁大小與瀏覽器窗口大小從來都不是一回事?。?！這尼瑪最近才明白，坑~

所以，要知道以下常:

網(wǎng)頁的范圍
我們在代碼里面設(shè)置的CSS或者js腳本，改變的樣式就是網(wǎng)頁范圍下的改變，也就是說，我們設(shè)置的CSS大小是網(wǎng)頁的不是瀏覽器窗口的大小。

瀏覽器窗口
瀏覽器窗口中看到的那部分實(shí)時動態(tài)的網(wǎng)頁面積，又叫做viewport（視口）。

為什么說是實(shí)時動態(tài)的窗口？
比如，我上班時偷偷的新窗口打開淘寶，然后把窗口調(diào)的很小，這樣老大就不會發(fā)覺拉。這樣一來，本來全屏的窗口變成了小窗口，因此瀏覽器的窗口大小也就被改變了。

在不出現(xiàn)各種滾動條的情況下，viewport的大小和網(wǎng)頁的大小是相同的。

獲取網(wǎng)頁的大小的方法1

clientHeight和clientWidth屬性。這兩個屬性指元素的內(nèi)容部分再加上padding的所占據(jù)的視覺面積，不包括border和滾動條占用的空間。
獲取body的這兩個屬性，可以得出網(wǎng)頁的大小。

盜個圖說明一下：

再盜個代碼

function getViewport(){
　　　　if (document.compatMode == "BackCompat"){
　　　　　　return {
　　　　　　　　width: document.body.clientWidth,
　　　　　　　　height: document.body.clientHeight
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: document.documentElement.clientWidth,
　　　　　　　　height: document.documentElement.clientHeight
　　　　　　}
　　　　}
　　}

注意事項(xiàng)

這個函數(shù)必須在頁面加載完成后才能運(yùn)行，否則document對象還沒生成，瀏覽器會報錯。

大多數(shù)情況下，都是document.documentElement.clientWidth返回正確值。但是，在IE6的quirks模式中，document.body.clientWidth返回正確的值，因此函數(shù)中加入了對文檔模式的判斷。

clientWidth和clientHeight都是只讀屬性，不能對它們賦值。

獲取網(wǎng)頁的大小的方法2

document對象的scrollHeight和scrollWidth屬性就是網(wǎng)頁的大小，意思就是滾動條滾過的所有長度和寬度。

function getPagearea(){
　　　　if (document.compatMode == "BackCompat"){
　　　　　　return {
　　　　　　　　width: Math.max(document.body.scrollWidth,
　　　　　　　　　　　　　　　　document.body.clientWidth),
　　　　　　　　height: Math.max(document.body.scrollHeight,
　　　　　　　　　　　　　　　　document.body.clientHeight)
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: Math.max(document.documentElement.scrollWidth,
　　　　　　　　　　　　　　　　document.documentElement.clientWidth),
　　　　　　　　height: Math.max(document.documentElement.scrollHeight,
　　　　　　　　　　　　　　　　document.documentElement.clientHeight)
　　　　　　}
　　　　}
　　}
元素的絕對位置

詳見參考資料里面的函數(shù)

網(wǎng)頁元素的相對位置

詳見參考資料里面的函數(shù)

獲取元素位置的快速方法

getBoundingClientRect():返回一個對象，其中包含了left、right、top、bottom四個屬性，分別對應(yīng)了該元素的左上角和右下角相對于瀏覽器窗口（viewport）左上角的距離。

　　var X= this.getBoundingClientRect().left;
　　var Y =this.getBoundingClientRect().top;

再加上滾動距離，就可以得到絕對位置

　　var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
　　var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

目前，IE、Firefox 3.0+、Opera 9.5+都支持該方法，而Firefox 2.x、Safari、Chrome、Konqueror不支持。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115029.html

相關(guān)文章

  • Javascript事件代理の真理

    摘要：參考資料事件代理很久很久以來，總感覺事件發(fā)生與事件代理到之間沒什么鳥區(qū)別。要搞清楚什么是事件代理，就需要先搞清楚什么是代理。，怎么從字面來理解事件代理一詞的含義后文有講。于是，看了事件代理的資料。這一過程被稱為事件冒泡。 參考資料：js-事件代理 很久很久以來，總感覺事件發(fā)生與事件代理到之間沒什么鳥區(qū)別。 最近，又看了一下，感覺區(qū)別其實(shí)真不大！看怎么理解吧。 要搞清楚什么是事件代理，就...

    lijy91 評論0 收藏0

  • 前端修煉の道：第一個 HTML 頁面

    摘要：可見對一個頁面正確渲染很重要。和標(biāo)簽對用于標(biāo)識頁面的頭部區(qū)域，和之間的內(nèi)容都屬于頭部區(qū)域中的內(nèi)容。是一個輔助性標(biāo)簽，對頁面可以進(jìn)行很多方面的特性的設(shè)置。當(dāng)頁面沒有設(shè)置字符集時，瀏覽器會使用默認(rèn)的字符編碼顯示。 showImg(https://segmentfault.com/img/bVbjNkI?w=900&h=383); 往期回顧 在 1.2 節(jié)介紹 HTML 語言時講到：HTML...

    JasonZhang 評論0 收藏0

  • 前端修煉の道 | 如何成為一名合格前端開發(fā)工程師？

    摘要：上期回顧在上一節(jié)我們已了解前端開發(fā)是做什么的，現(xiàn)在的問題是，如何才能成為一名合格的前端開發(fā)工程師相信這個問題是大家比較關(guān)心的。 showImg(https://segmentfault.com/img/bVbi9ks?w=900&h=383);上期回顧 在上一節(jié)我們已了解前端開發(fā)是做什么的，現(xiàn)在的問題是，如何才能成為一名合格的前端開發(fā)工程師？ 相信這個問題是大家比較關(guān)心的。 前端開發(fā)工...

    Jackwoo 評論0 收藏0

  • 每日 30 秒 ? H1 の 小秘密

    showImg(https://segmentfault.com/img/remote/1460000018747727?w=900&h=500); 簡介 heading 標(biāo)簽、SEO、無障礙閱讀 ps: 內(nèi)容有點(diǎn)多，本來只想講一個點(diǎn)，但是關(guān)聯(lián)性太強(qiáng)了，所以辛苦大家了。 在學(xué)習(xí) HTML 標(biāo)簽的時候，很多教程只告訴你 怎么用 而沒有講清楚 是什么，讓我們一起從 h1 到 h6 開始重新認(rèn)識 HTM...

    blastz 評論0 收藏0

  • 重學(xué) html の meta 標(biāo)簽

    摘要：標(biāo)簽的個屬性。緩存所有響應(yīng)，但并非必須。只為單個用戶緩存，因此不允許任何中繼進(jìn)行緩存。比如說就不允許緩存的響應(yīng)表示當(dāng)前請求開始，該響應(yīng)在多久內(nèi)能被緩存和重用，而不去服務(wù)器重新請求。 meta簡介 網(wǎng)頁元數(shù)據(jù)，常用于定義網(wǎng)頁的編碼、說明、關(guān)鍵字、修改日期及其他信息。這些數(shù)據(jù)服務(wù)于瀏覽器、搜索引擎等。 meta 標(biāo)簽的2個屬性name, http-equiv。 。 name 屬性 ...

    guyan0319 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<