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

資訊專欄INFORMATION COLUMN

JS中的位置與大小

Developer / 2394人閱讀

摘要：客戶區(qū)大小元素的客戶區(qū)大小指的是元素內(nèi)容機器內(nèi)邊距占據(jù)空間的大小。滾動大小和主要用于確定元素內(nèi)容的實際大小。窗口大小在現(xiàn)代主流瀏覽器中提供了四個屬性確定窗口的大小，分別為和。

原文鏈接：http://mrzhang123.github.io/2016/08/03/js-position/

最近事兒比較多，一直沒時間寫東西，前幾天又遇到關(guān)于獲取元素大小的問題，每次遇到這類問題就翻書，比較費時間，所以總結(jié)一下。
1.元素的偏移量

元素的偏移量包括元素在屏幕上占用的所有可見的空間。元素的可見大小由其高度、寬度決定，包括所有內(nèi)邊距、滾動條和邊框大?。ㄗ⒁猓哼@里并不包括外邊距）。

2.客戶區(qū)大小

元素的客戶區(qū)大小指的是元素內(nèi)容機器內(nèi)邊距占據(jù)空間的大小。

要確定瀏覽器可見窗口的大小，可以使用document.documentElement或document.body（IE7之前的版本中）。

從以上兩個我們可以看出元素偏移量（offset）與客戶區(qū)大?。╟lient）的區(qū)別在于有沒有包含邊框，客戶區(qū)大小不包含邊框。

3.滾動大小

scrollWidth和scrollHeight主要用于確定元素內(nèi)容的實際大小。所以帶有垂直滾動條的頁面總高度就是document.documentElement.scrollHeight。

4.窗口大小

在現(xiàn)代主流瀏覽器中提供了四個屬性確定窗口的大小，分別為：innerWidth、innerHeight、outerWidth和outerHeight。

4.1. outerWidth和outerHeight

返回瀏覽器窗口本身的尺寸（無論是從外層的window對象還是從某個框架訪問）

4.2. innerWidth和innerHeight

返回該容器中頁面試圖去的大小（減去邊框?qū)挾龋?/p>

注意：

這里在《javascript高級程序設計》（第三版）中寫道在chrome中outer與inner返回的值是一樣的，這算是chrome的一個bug，我在chrome 53中已經(jīng)修復，但是在QQ瀏覽器中（內(nèi)核為chromium47）依舊是相等的，這需要注意！
clientWidth和clientHeight。

在主流瀏覽器中，document.docuementElement.clientWidth和document.documentElement.clientHeight中保存的是頁面視口信息。返回的值與window.innerHeight，window.innerWidth一樣。
但是window.innerHeight在IE8及以下瀏覽器中結(jié)果是undefined，而document.documentElement.clientHeight還有值。所以在各個瀏覽器下取得頁面視口大小的代碼如下：

var pageWidth=window.innerWidth,
    pageHeight=window.innerHeight;
if(typeof pageWidth !== "number"){
    if(document.compatMode === "CSS1Compat"){
        pageWidth=document.documentElement.clientWidth;
        pageHeight=document.documentElement.clientHeight;
    }else{
        pageWidth=document.body.clientWidth;
        pageHeight=document.body.clientHeight;
    }
}

代碼中document.compatMode用于判斷瀏覽器處于什么模式，它有兩個值：
BackCompat:瀏覽器處于怪異模式
CSS1Compat:瀏覽器處于標準模式
不同模式下，獲取瀏覽器的寬度的方法不同，在代碼中已經(jīng)做了判斷。

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

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

相關(guān)文章

  • 有了 TensorFlow.js，瀏覽器中就能進行實時人體姿勢判斷

    摘要：反饋檢測到的每個人的置信度值以及檢測到的每個姿勢關(guān)鍵點。姿勢置信度這決定了姿勢判斷的整體置信度。在較高級別，這將控制回饋的姿勢較低置信度分數(shù)。只有在調(diào)整姿勢置信度得分不夠好的情況下，為了過濾掉不太準確的姿勢，該數(shù)值應該增加或減少。 文 / Dan Oved，Google Creative Lab 的自由創(chuàng)意技術(shù)專家，紐約大學 ITP 的研究生。編輯和插圖 / 創(chuàng)意技術(shù)專家 Irene Alv...

    KaltZK 評論0 收藏0

  • js操作瀏覽器窗口及元素大小

    摘要：在中上面的兩組屬性相同，都表示視口的大小，而不是瀏覽器窗口的大小。但在其他瀏覽器中，后面的這兩個屬性表示的是整個頁面布局視口，也就是頁面選然后的實際大小。元素在水平方向桑占用的空間的大小。 1、窗口位置 窗口對象對應的是window對象。在window對象中使用屬性screenTop、screenLeft、screenY和screenX（單位為像素）兩組屬性來表示窗口相對于屏幕上邊和左...

    Martin91 評論0 收藏0

  • JS數(shù)據(jù)類型 與 內(nèi)存堆棧

    摘要：所以相對于簡單數(shù)據(jù)類型而言，他們占用內(nèi)存比較小，如果放在堆中，查找會浪費很多時間，而把堆中的數(shù)據(jù)放入棧中也會影響棧的效率。六總結(jié)本文總結(jié)了數(shù)據(jù)類型及其聲明賦值更新時在內(nèi)存堆棧中的表現(xiàn)，可以更深入的理解這些數(shù)據(jù)類型。 JS數(shù)據(jù)類型 與 內(nèi)存堆棧 一、前言 JS的數(shù)據(jù)類型已經(jīng)是大家都很熟悉的東西了，但是大家是否對這些數(shù)據(jù)類型在內(nèi)存中的分配了解，甚至在操作這些變量時，內(nèi)存中是如何表現(xiàn)的，本文...

    nodejh 評論0 收藏0

  • Web性能優(yōu)化

    摘要：性能優(yōu)化網(wǎng)站的性能細線在幾個方面網(wǎng)站首頁加載速度動畫的流暢度通過分析瀏覽器的渲染原理資源對渲染的影響，得出優(yōu)化網(wǎng)站性能的辦法。查看性能的工具的面板錄制網(wǎng)頁加載的過程，分析記錄瀏覽器渲染過程中每個過程的耗時。通過引入，可以避免阻塞。 1 Web性能優(yōu)化 Web網(wǎng)站的性能細線在幾個方面： 網(wǎng)站首頁加載速度 動畫的流暢度 通過分析瀏覽器的渲染原理、資源對渲染的影響，得出優(yōu)化網(wǎng)站性能的辦法...

    ZHAO_ 評論0 收藏0

  • 深入前端-徹底搞懂瀏覽器運行機制

    摘要：當這些異步任務發(fā)生的時候，它們將會被放入瀏覽器的事件任務隊列中去，等到運行時執(zhí)行線程空閑時候才會按照隊列先進先出的原則被一一執(zhí)行，但終究還是單線程。 瀏覽器是多進程的 showImg(https://segmentfault.com/img/remote/1460000019706956?w=815&h=517); Browser進程： 瀏覽器的主進程（負責協(xié)調(diào)、主控），只有一個。 負...

    YPHP 評論0 收藏0

發(fā)表評論

0條評論

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