網頁與瀏覽器窗口の真理

tinysun1234 發布于2019-08-30 12:44 / 1115人閱讀

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

參考資料

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

所以，要知道以下常:

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

瀏覽器窗口
瀏覽器窗口中看到的那部分實時動態的網頁面積，又叫做viewport（視口）。

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

在不出現各種滾動條的情況下，viewport的大小和網頁的大小是相同的。

獲取網頁的大小的方法1

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

盜個圖說明一下：

再盜個代碼

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
　　　　　　}
　　　　}
　　}

注意事項

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

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

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

獲取網頁的大小的方法2

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

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)
　　　　　　}
　　　　}
　　}

元素的絕對位置

詳見參考資料里面的函數

網頁元素的相對位置

詳見參考資料里面的函數

獲取元素位置的快速方法

getBoundingClientRect():返回一個對象，其中包含了left、right、top、bottom四個屬性，分別對應了該元素的左上角和右下角相對于瀏覽器窗口（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不支持。

云服務器 GPU云服務器安卓窗口瀏覽器真理云服務器網頁彈出窗口彈不出來網頁瀏覽器

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

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

Javascript事件代理の真理

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

lijy91 2019-08-19 17:32 評論0 收藏0
前端修煉の道：第一個 HTML 頁面

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

JasonZhang 2019-08-26 13:23 評論0 收藏0
前端修煉の道 | 如何成為一名合格前端開發工程師？

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

Jackwoo 2019-08-23 12:50 評論0 收藏0
每日 30 秒 ? H1 の小秘密

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

blastz 2019-08-23 16:42 評論0 收藏0
重學 html の meta 標簽

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

guyan0319 2019-08-02 16:15 評論0 收藏0