1. 圖解瀏覽器和用戶設備的寬高等屬性

来源:https://www.cnblogs.com/xihailong/archive/2019/11/01/11776423.html
-Advertisement-
Play Games

16個常見屬性 6個常見的瀏覽器窗體屬性 document.documentElement.clientWidth 瀏覽器可視區域寬度 document.documentElement.clientHeight 瀏覽器可視區域高度 document.documentElement.scrollWid ...


16個常見屬性

  6個常見的瀏覽器窗體屬性

    document.documentElement.clientWidth    瀏覽器可視區域寬度

    document.documentElement.clientHeight    瀏覽器可視區域高度

    document.documentElement.scrollWidth    整個網頁的寬度

    document.documentElement.scrollHeight    整個網頁的高度

    document.body.scrollTop            網頁上方被捲(藏)起來的部分

    document.body.scrollLeft            網頁左邊被捲(藏)起來的部分

  6個常見的屏幕對象屬性

    window.screen.width              設備寬度

    window.screen.height              設備高度

    window.screenTop                瀏覽器視窗離設備頂部的距離

    window.screenLeft                瀏覽器視窗離設備左端的距離

    window.screen.availHeight            設備實際工作區的高度

    window.screen.availWidth             設備實際工作區的寬度

  4個常用的dom屬性

    div.offsetWidth                div元素的寬

    div.offsetHeight                div元素的高

    div.offsetLeft                 元素相對網頁left的距離

    div.offsetTop                  元素相對網頁top的距離

詳情:

  1.1 document.documentElement.clientWidth和document.documentElement.clientHeight指的是瀏覽器當前視窗視圖區域的實際寬高(不包括工具欄及滾動條等)

 

由於IE8及JQ的$(window).height()在部分瀏覽器下會出錯, 所以建議如果要獲取瀏覽器可視區域高度,代碼如下

var win_h = window.innerHeight||document.documentElement.clientHeight;

  

  1.2 document.documentElement.scrollWidth和document.documentElement.scrollHeight 是整個網頁的寬高, 包括可視區域和被捲起來的區域

  1.3document.body.scrollTop 和 document.body.scrollLeft 是整個網頁的上方或者左邊被捲起來的部分(註意這裡中間部分是body而不再是documentElement)

  如果想要獲得下麵的或者右面的, 那就用整個頁面的寬高document.documentElement.scrollHeight減去網頁上方被捲起來的部分document.body.scrollTop, 再減去當前瀏覽器視圖區域的高度document.documentElement.clientHeight即可.

 

  2.1 window.screen.width 和 window.screen.height 是獲取你整個顯示器屏幕大小的

  2.2 window.screenTop 和 window.screenLeft 是瀏覽器視窗頂部/左端距離屏幕大小的:

 

  2.3 window.screen.availHeight 和 window.screen.availWidth 是用戶屏幕實際工作區(減去任務欄等非工作區模塊大小)的高和寬:

 

聲明: 本文參考自https://www.cnblogs.com/vajoy/p/3705126.html, 僅用於學習, 請務做商用

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1、安裝庫 npm install typings echarts --global npm install ngx-echarts --save npm install @types/echarts --save 2、app.module引入 import { BrowserModule } fr ...
  • 遞歸和閉包作為js中很重要的一環,幾乎在前端的面試中都會涉及,特別閉包。今天前端組的組長冷不丁的問了我一下,粗略的回答了一下,感覺不太滿足,於是重新學習了一下,寫下本篇。 在說這個兩個概念之前,我們先回顧一下函數表達式。 function實際上是一種引用對象,和其他引用類型一樣,都有屬性和方法。定義 ...
  • 為什麼我想要使用redux? 前段時間初步上手了react,最近在使用react的過程中發現對於組件之間通信的需求比較迫切,尤其是在axios非同步請求後端數據的時候,這樣的需求是特別強烈的!舉個例子: // 廠家報告到貨 class ReportArrivalGoods extends React. ...
  • 本文由葡萄城技術團隊於博客園原創並首發 轉載請註明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。 前端技術的發展日新月異,過一段時間就會出現新的框架、工具、插件,伴隨著十幾年的發展,前端領域已經告別了野蠻生長的時期,越發表現出成熟和現代化,引領了整個技術行業的潮流, ...
  • 網上查了很多圖片懶載入的內容, 但基本上都是jQuery實現的, 沒有說清楚其原理, 所以研究了一下 多的不說, 上代碼, 看不明白的建議看下我的上一篇文章<1. 圖解瀏覽器和用戶設備的寬高等屬性> HTML部分(圖片地址自己隨意) JS部分 雖然比較啰嗦, 但是內容詳細. 希望能幫到大家 最終效果 ...
  • 有一個單選下拉框要改成多選,裡面還有一個全部選項,當選擇全部時要全部勾選上,類似於樹形下拉框。效果如下: 傳到後臺的數據就根據自己的需要做修改了,當選擇全部時就只傳全部這一個值,但後臺查出來的數據是要滿足所有項的,當然取消全部時在查詢的時候也還是要滿足所有項。代碼如下: 添加fSelect.css, ...
  • 原創作品,轉載請註明來源, "sogeisetsu" ,我的csdn上也有這篇文章 "csdn" js屬性,封裝性,prototype綜合解析 用實例來解釋以下js的公有屬性,靜態屬性,實例屬性,prototype和封裝性 下麵是我在寫博客的源代碼,您可以先不要看他,先看下麵的文字部分 先搞清楚原型 ...
  • 當我們在組件間切換的時候,Angular都會銷毀上一個組件,並且創建一個新的組件。在大多數情況下,我們可能不想讓它這樣工作,因為每次載入一個組件,可能會有很多類似HTTP請求一樣的昂貴的操作。 這時候就需要RouteReuseStrategy了。 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...