利用document.compatModel來判斷當前瀏覽器采用的渲染方式

lscho 發(fā)布于2019-08-20 10:48 / 1313人閱讀

摘要：當?shù)扔跁r，瀏覽器客戶區(qū)寬度是當?shù)扔跁r，瀏覽器客戶區(qū)寬度是。瀏覽器客戶區(qū)高度滾動條高度滾動條的滾動條的等等都是上面的情況。一個準確獲取網(wǎng)頁客戶區(qū)的寬高滾動條寬高滾動條和的代碼以上代碼兼容目前流行的全部瀏覽器，包括

document.compatMode

返回值：BackCompat和CSS1Compat
官方解釋：

BackCompat：標準兼容模式關(guān)閉。
CSS1Compat：標準兼容模式開啟。

當document.compatMode等于BackCompat時，瀏覽器客戶區(qū)寬度是document.body.clientWidth；
當document.compatMode等于CSS1Compat時，瀏覽器客戶區(qū)寬度是document.documentElement.clientWidth。
瀏覽器客戶區(qū)高度、滾動條高度、滾動條的Left、滾動條的Top等等都是上面的情況。
一個準確獲取網(wǎng)頁客戶區(qū)的寬高、滾動條寬高、滾動條Left和Top的代碼：

if (document.compatMode == "BackCompat") {
cWidth = document.body.clientWidth;
cHeight = document.body.clientHeight;
sWidth = document.body.scrollWidth;
sHeight = document.body.scrollHeight;
sLeft = document.body.scrollLeft;
sTop = document.body.scrollTop;
}
else { //document.compatMode == "CSS1Compat"
cWidth = document.documentElement.clientWidth;
cHeight = document.documentElement.clientHeight;
sWidth = document.documentElement.scrollWidth;
sHeight = document.documentElement.scrollHeight;
sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
}

（以上代碼兼容目前流行的全部瀏覽器，包括：IE、Firefox、Safari、Opera、Chrome）

云服務(wù)器 GPU云服務(wù)器判斷當前瀏覽器采用混合云的方式 api的方式來管理云服務(wù)器采用js渲染數(shù)據(jù)

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

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

相關(guān)文章

VUE知識點集錦

摘要：載入前后在階段，實例的和都初始化了，但還是掛載之前為虛擬的節(jié)點，還未替換。類似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個...

Tecode 2019-08-23 16:02 評論0 收藏0
VUE知識點集錦

摘要：載入前后在階段，實例的和都初始化了，但還是掛載之前為虛擬的節(jié)點，還未替換。類似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個...

APICloud 2019-08-02 14:34 評論0 收藏0
React專題：react，redux以及react-redux常見一些面試題

摘要：我們可以為元素添加屬性然后在回調(diào)函數(shù)中接受該元素在樹中的句柄，該值會作為回調(diào)函數(shù)的第一個參數(shù)返回。使用最常見的用法就是傳入一個對象。單向數(shù)據(jù)流，比較有序，有便于管理，它隨著視圖庫的開發(fā)而被概念化。面試中問框架，經(jīng)常會問到一些原理性的東西，明明一直在用，也知道怎么用，但面試時卻答不上來，也是挺尷尬的，就干脆把react相關(guān)的問題查了下資料，再按自己的理解整理了下這些答案。 reac...

darcrand 2019-08-23 13:41 評論0 收藏0
Node_深入淺出Node

摘要：簡介項目命名為就是一個服務(wù)器單純開發(fā)一個服務(wù)器的想法，變成構(gòu)建網(wǎng)絡(luò)應(yīng)用的一個基本框架發(fā)展為一個強制不共享任何資源的單線程，單進程系統(tǒng)。單線程弱點無法利用多核錯誤會引起整個應(yīng)用退出，應(yīng)用的健壯性大量計算占用導(dǎo)致無法繼續(xù)調(diào)用異步。 NodeJs簡介 Ryan Dahl項目命名為：web.js 就是一個Web服務(wù)器.單純開發(fā)一個Web服務(wù)器的想法，變成構(gòu)建網(wǎng)絡(luò)應(yīng)用的一個基本框架.Node發(fā)展...

shinezejian 2019-08-19 18:48 評論0 收藏0
vue源碼閱讀之數(shù)據(jù)渲染過程

摘要：圖在中應(yīng)用三數(shù)據(jù)渲染過程數(shù)據(jù)綁定實現(xiàn)邏輯本節(jié)正式分析從到數(shù)據(jù)渲染到頁面的過程，在中定義了一個的構(gòu)造函數(shù)。一、概述 vue已是目前國內(nèi)前端web端三分天下之一，也是工作中主要技術(shù)棧之一。在日常使用中知其然也好奇著所以然，因此嘗試閱讀vue源碼并進行總結(jié)。本文旨在梳理初始化頁面時data中的數(shù)據(jù)是如何渲染到頁面上的。本文將帶著這個疑問一點點追究vue的思路。總體來說vue模版渲染大致流程如圖1所...

AlphaGooo 2019-05-22 16:53 評論0 收藏0