国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JS中的位置與大小

Developer / 2393人閱讀

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

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

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

元素的偏移量包括元素在屏幕上占用的所有可見的空間。元素的可見大小由其高度、寬度決定，包括所有內邊距、滾動條和邊框大小（注意：這里并不包括外邊距）。

2.客戶區大小

元素的客戶區大小指的是元素內容機器內邊距占據空間的大小。

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

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

3.滾動大小

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

4.窗口大小

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

4.1. outerWidth和outerHeight

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

4.2. innerWidth和innerHeight

返回該容器中頁面試圖去的大小（減去邊框寬度）

注意：

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

在主流瀏覽器中，document.docuementElement.clientWidth和document.documentElement.clientHeight中保存的是頁面視口信息。返回的值與window.innerHeight，window.innerWidth一樣。
但是window.innerHeight在IE8及以下瀏覽器中結果是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:瀏覽器處于標準模式
不同模式下，獲取瀏覽器的寬度的方法不同，在代碼中已經做了判斷。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80017.html

相關文章

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

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

    KaltZK 評論0 收藏0

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

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

    Martin91 評論0 收藏0

  • JS數據類型 與 內存堆棧

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

    nodejh 評論0 收藏0

  • Web性能優化

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

    ZHAO_ 評論0 收藏0

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

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

    YPHP 評論0 收藏0

發表評論

0條評論

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