jquery的height()和javascript的height總結，js獲取屏幕高度

jquery的height()和javascript的height總結，js獲取屏幕高度
在javascript和jquery中，都有對各種高度的寫法，在這里，我們就著重講一下窗口、文檔等高度的理解。(寬度和高度差不多！)
jquery的各種高度

首先來說一說$(document)和$(window)，如下：

$(document).height();//整個網頁的高度
$(window).height();//瀏覽器可視窗口的高度
$(window).scrollTop();//瀏覽器可視窗口頂端距離網頁頂端的高度（垂直偏移）

用一句話理解就是：當網頁滾動條拉到最低端時，

$(document).height() == $(window).height() + $(window).scrollTop()。

注意，是拉到最低端！

當網頁高度不足瀏覽器窗口時$(document).height()返回的是$(window).height()

假如您要獲取整個網頁的高度，不建議用$("html").height()、$("body").height()的高度，

原因：

$("body").height()：body可能會有邊框，獲取的高度會比$(document).height()小； $("html").height()：在不同的瀏覽器上獲取的高度的意義會有差異，說白了就是瀏覽器不兼容。

說道這里，提及邊框和margin還有padding，我們自然想到了jquery的另外的兩個高度，那就是innerHeight()和outerHeight()

innerHeight()和outerHeight()不適用于window 和 document對象，對于window 和 document對象可以使用.height()代替。innerHeight()和outerHeight()主要用來獲取標簽的高度。
innerHeight()

enter image description here

innerHeight:高度＋補白

outerHeight:高度＋補白＋邊框，參數為true時：高度＋補白＋邊框＋邊距

innerHeight(value)

這個“value”參數可以是一個字符串（數字加單位）或者是一個數字,如果這個“value”參數只提供一個數字，jQuery會自動加上像素單位（px）。如果只提供一個字符串，任何有效的CSS尺寸都可以為高度賦值（就像100px, 50%, 或者 auto）。注意在現代瀏覽器中，CSS高度屬性不包含padding, border, 或者 margin， 除非box-sizingCSS屬性被應用。
jquery高度，放到瀏覽器中試一下

alert($(window).height());?????????????????????????? //瀏覽器當前窗口可視區域高度
alert($(document).height());??????????????????????? //瀏覽器當前窗口文檔的高度
alert($(document.body).height());??????????????? //瀏覽器當前窗口文檔body的高度
alert($(document.body).outerHeight(true));? //瀏覽器當前窗口文檔body的總高度 包括border padding margin
alert($(window).width());??????????????????????????? //瀏覽器當前窗口可視區域寬度
alert($(document).width());??????????????????????? //瀏覽器當前窗口文檔對象寬度
alert($(document.body).width());??????????????? //瀏覽器當前窗口文檔body的寬度
alert($(document.body).outerWidth(true));? //瀏覽器當前窗口文檔body的總寬度 包括border padding margin

javascript的各種高度

網頁可見區域寬[僅針對body]： document.body.clientWidth
網頁可見區域高[僅針對body]： document.body.clientHeight
網頁可見區域寬[僅針對body]： document.body.offsetWidth (包括滾動條和邊框，若滾動條和邊框為0，則和clientWidth相等)
網頁可見區域高[僅針對body]： document.body.offsetHeight (包括滾動條和邊框，若滾動條和邊框為0，則和clientHeight相等)
可視窗口寬度(包括滾動軸寬度)：window.innerWidth; //IE9+、Chrome、Firefox、Opera 以及 Safari
可視窗口高度，不包括瀏覽器頂部工具欄： window.innerHeight;//IE9+、Chrome、Firefox、Opera 以及 Safari
網頁正文全文寬(不包括滾動軸的寬度)： document.body.scrollWidth
網頁正文全文高：document.body.scrollHeight
//假如網頁中沒有滾動軸，document.body.scrollWidth和window.innerWidth相等，document.body.scrollHeight和window.innerHeight相等。
網頁被卷去的高： document.body.scrollTop
網頁被卷去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
屏幕分辨率的高（整個屏幕的高度）： window.screen.height
屏幕分辨率的寬（整個屏幕的寬度）： window.screen.width
屏幕可用工作區高度： window.screen.availHeight
屏幕可用工作區寬度： window.screen.availWidth
整個瀏覽器可用工作區高度： window.outerHeight
整個瀏覽器可用工作區寬度： window.outerWidth

結束語

注意，在運用jquery的innerHeight()和outerHeight()的時候，可能會有瀏覽器的兼容問題，不同瀏覽器出現不同高度，總之，實踐得真知，你可以測試一下，寫幾個小的demo，總結一下！

http://www.haorooms.com/post/js_jquery_height

js和jquery懶加載之可視區域加載
在制作js可視區域加載之前，我們首先必須了解各種高度，我之前的一篇文章javascript的height總結，大家可以看一下，復習一下！

了解了各種高度之后，我們開始我們的js代碼吧！

<!DOCTYPE html>
<html lang="en">
<head>
??? <meta charset="UTF-8">
??? <title>haorooms前端博客-可視區域加載之 javascript</title>
??? <style>
??? img{width:100%;margin-bottom: 30px; min-height: 400px; background-color: #ddd;}

??? </style>
</head>
<body>
??? <img haoroomslazyload="Chrysanthemum.jpg" src="" >
??? <img haoroomslazyload="Desert.jpg" src="" >
??? <img haoroomslazyload="Hydrangeas.jpg" src="" >
??? <img haoroomslazyload="Koala.jpg" src="" >
??? <img haoroomslazyload="Lighthouse.jpg" src="" >
??? <img haoroomslazyload="Penguins.jpg" src="" >
??? <img haoroomslazyload="Tulips.jpg" src="" >

??? <script>
??? var imgNum=document.getElementsByTagName('img').length;
??? var imgObj=document.getElementsByTagName("img");
??? var l=0;

??????? window.οnscrοll=function(){
??????????????? var seeHeight = document.documentElement.clientHeight;
??????????????? var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
??????????????? for(var i=l;i<imgNum;i++){
??????????????????? if(imgObj[i].offsetTop < seeHeight + scrollTop){
??????????????????????? console.log(imgObj[i].getAttribute("src"));
??????????????????????? console.log(imgObj[i].src );
??????????????????????? if(imgObj[i].getAttribute("src") == ""){
??????????????????????????? imgObj[i].src = imgObj[i].getAttribute("haoroomslazyload");
??????????????????????? }
??????????????????? }
??????????????????? if(imgObj[i].offsetTop > seeHeight + scrollTop){
??????????????????????? l=i;
??????????????????????? break;
??????????????????? }
??????????????? }
??????? }

</script>

大家注意看我的兩個console輸出，console.log(imgObj[i].src );獲取的是整個瀏覽器地址！
jquery懶加載之可視區域加載

上面的js用jquery翻譯版！

var l=0
//js方法翻譯版
$(window).bind("scroll", function(event){

??????????????? for(var i=l;i<$("img").length;i++){
??????????????????? if($("img").eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())){
??????????????????????? if($("img").eq(i).attr("src") == ""){
??????????????????????????? var lazyloadsrc=$('img').eq(i).attr("haoroomslazyload");
??????????????????????????? $("img").eq(i).attr("src",lazyloadsrc);
??????????????????????? }
??????????????????? }
??????????????????? if($("img").eq(i).offset().top? > parseInt($(window).height()) + parseInt($(window).scrollTop())){
??????????????????????? l=i;
??????????????????????? break;
??????????????????? }
??????????????? }

?});

另外一種方法，可以參考我之前寫的一個延遲加載的插件：http://www.haorooms.com/post/touchweb_canvas_lazyload

其中是這么寫的。

我把這個寫法拎了出來，如下：

$(window).bind("scroll", function(event){
$("img").each(function(){
????????? //窗口的高度+看不見的頂部的高度=屏幕低部距離最頂部的高度 ?
??????????? var thisButtomTop = parseInt($(window).height()) + parseInt($(window).scrollTop()); ?
??????????? var thisTop = parseInt($(window).scrollTop()); //屏幕頂部距離最頂部的高度 ?
??????????????? var PictureTop = parseInt($(this).offset().top); ?
???????????????? if (PictureTop >= thisTop && PictureTop <= thisButtomTop && $(this).attr("haoroomslazyload") != $(this).attr("src")) {
?????????????????? $(this).attr("src", $(this).attr("haoroomslazyload"));
???????????????? }
});
})

可視區域加載延伸

例如一個動畫效果，或者一個canvas圖片，我想達到的效果是，初始進來不加載，當滾動到這個動畫或者圖表上面的時候，進行加載，那么我們就可以根據上面的代碼進行如下改進：

$(window).bind("scroll", function(event){

????????? //窗口的高度+看不見的頂部的高度=屏幕低部距離最頂部的高度 ?
??????????? var thisButtomTop = parseInt($(window).height()) + parseInt($(window).scrollTop()); ?
??????????? var thisTop = parseInt($(window).scrollTop()); //屏幕頂部距離最頂部的高度 ?
??????????????? var PictureTop = parseInt($("你的要滾動加載的ID").offset().top); ?
???????????????? if (PictureTop >= thisTop && PictureTop <= thisButtomTop) {
????????????????? //? $("#你的要滾動加載的ID").attr("src", $("#你的要滾動加載的ID").attr("haoroomslazyload"));

?????????????????? //此處可以執行你的加載函數，加載函數由原來的document.ready中，移到這里來！



???????????????? }
})

轉載于:https://www.cnblogs.com/andydao/p/6037946.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/285601.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/285601.shtml
英文地址，請注明出處：http://en.pswp.cn/news/285601.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

【地理信息系統GIS】教案（七章全）第五章：空間數據查詢與空間分析

【地理信息系統GIS】教案（七章全）第五章：空間數據查詢與空間分析

目錄 第一節 空間數據查詢第二節 緩沖區分析第三節 疊置分析第四節 網絡分析第五節 DEM建立及分析第一節 空間數據查詢 1.1 空間數據查詢 1、空間數據查詢的含義 從空間數據庫中找出所有滿足屬性約束條件和空間約束條件的地理對象。 空間數據查詢的一般過程 2、空間數據查詢…
閱讀更多...
Understanding G1 GC Logs--轉載

Understanding G1 GC Logs--轉載

原文地址&#xff1a;https://blogs.oracle.com/poonam/entry/understanding_g1_gc_logs Understanding G1 GC Logs By Poonam-Oracle on Jun 18, 2012 The purpose of this post is to explain the meaning of GC logs generated with some tracing and diagnostic options fo…
閱讀更多...
Dart語言精簡入門介紹

Dart語言精簡入門介紹

Dart語言精簡入門介紹 1、介紹 Dart 在設計時應該是同時借鑒了 Java 和 JavaScript和kotlin 面向對象 JIT&AOT&#xff1a;JIT&#xff08;Just in Time&#xff09;優點&#xff1a;即時編譯&#xff0c;開發期間更快編譯&#xff0c;更快的重載&#xff1b;缺點&#…
閱讀更多...
WPF 窗口居中 變更觸發機制

WPF 窗口居中 變更觸發機制

本文經原作者授權以原創方式二次分享&#xff0c;歡迎轉載、分享。原文作者&#xff1a;唐宋元明清原文地址&#xff1a;https://www.cnblogs.com/kybs0/p/7420767.html窗口居中 & 變更觸發機制解決&#xff1a;1&#xff09;單實例窗口&#xff0c;窗口每次隱藏后再顯示時…
閱讀更多...
[轉]5分鐘實現Android中更換頭像功能

[轉]5分鐘實現Android中更換頭像功能

5分鐘實現Android中更換頭像功能 寫在前面&#xff1a; 更換頭像這個功能在用戶界面幾乎是100%出現的。通過拍攝照片或者調用圖庫中的圖片&#xff0c;并且進行剪裁&#xff0c;來進行頭像的設置。 功能相關截圖如下&#xff1a; 下面我們直接看看完整吧&#xff1a; public cl…
閱讀更多...
Excel VBA窗體上打印系統時間print now出錯原因及解決方案

Excel VBA窗體上打印系統時間print now出錯原因及解決方案

如圖所示，需要在窗體上顯示當前系統時間： 首先，我們看一下now函數的原型： Now 函數 　　語法：Now 　　說明：返回一個 Variant (Date)，根據計算機系統設置的日期和時間來指定日期和時間。 　　示例： Private Sub CommandButton1_Click()Dim a As Varianta = NowMsgBox…
閱讀更多...
（第九周）團隊項目14

（第九周）團隊項目14

項目名&#xff1a;食物鏈教學工具 組名&#xff1a;奮斗吧兄弟 組長&#xff1a;黃興 組員&#xff1a;李俞寰、杜橋、欒驕陽、王東涵 代碼地址&#xff1a;HTTPS: https://git.coding.net/li_yuhuan/FoodChain.git SSH: gitgit.coding.net:li_yuhuan/FoodChain.git SCRUM會議…
閱讀更多...
為什么 C# 訪問 null 字段會拋異常？

為什么 C# 訪問 null 字段會拋異常？

一&#xff1a;背景 1. 一個有趣的話題最近在看 硬件異常 相關知識&#xff0c;發現一個有意思的空引用異常問題&#xff0c;拿出來和大家分享一下&#xff0c;為了方便講述&#xff0c;先上一段有問題的代碼。namespace ConsoleApp2 {internal class Program{static Person pe…
閱讀更多...
Android項目實戰（十五）：自定義不可滑動的ListView和GridView

Android項目實戰（十五）：自定義不可滑動的ListView和GridView

不可滑動的ListView (RecyclweView類似) public class NoScrollListView extends ListView {public NoScrollListView(Context context, AttributeSet attrs) {super(context,attrs);}public void onMeasure(int widthMeasureSpec, int heightMeasureSpec){ int mExpandSpec …
閱讀更多...
C語言試題一百之輸入某年某月某日，判斷這一天是這一年的第幾天

C語言試題一百之輸入某年某月某日，判斷這一天是這一年的第幾天

?作者簡介：大家好我是碼莎拉蒂，CSDN博客專家?????? ??個人主頁：個人主頁 ??系列專欄：C語言試題200例 ??推薦一款模擬面試、刷題神器?? 點擊跳轉進入網站 1、題目 題目：輸入某年某月某日，判斷這一天是這一年的第幾天？ 分析： 以 3 月 5 日為例，應該先把…
閱讀更多...
[轉]Java學習路線圖（完整詳細2019版）

[轉]Java學習路線圖（完整詳細2019版）

一門永不過時的編程語言——Java 軟件開發。 Java編程語言占比&#xff1a; 據官方數據統計&#xff0c;在全球編程語言工程師的數量上&#xff0c;Java編程語言以1000萬的程序員數量位居首位。 而且很多軟件的開發都離不開Java編程&#xff0c;因此其程序員的數量最多。而在…
閱讀更多...
【CASS精品教程】Win7+CAD2008+CASS9.1（含CASS3D）完美安裝教程（附完整軟件安裝包下載）

【CASS精品教程】Win7+CAD2008+CASS9.1（含CASS3D）完美安裝教程（附完整軟件安裝包下載）

本文講解win764位系統上安裝CAD2008+CASS9.1（含CASS3D）免費版安裝，文末附完整軟件下載地址，親測可用！！！ 文章目錄 1. CAD2008安裝2. CASS9.1安裝3. 軟件下載地址1. CAD2008安裝 雙擊安裝包中的Setup.exe，開始安裝。 點擊【安裝產品】。
閱讀更多...
（十一）Jmeter另一種調試工具 HTTP Mirror Server

（十一）Jmeter另一種調試工具 HTTP Mirror Server

之前我介紹過Jmeter的一種調試工具Debug Sampler&#xff0c;它可以輸出Jmeter的變量、屬性甚至是系統屬性而不用發送真實的請求到服務器。既然這樣&#xff0c;那么HTTP Mirror Server又是做什么用的呢&#xff1f; 一、HTTP Mirror Server的作用&#xff1a; 它可以在本地臨…
閱讀更多...
C語言九十八之實現企業發放的獎金根據利潤提成。利潤(I)低于或等于 10 萬元時，獎金可提 10%；利潤高 于 10 萬元，低于 20 萬元時，低于 10 萬元的部分按 10%提成，高于 10 萬元的

C語言九十八之實現企業發放的獎金根據利潤提成。利潤(I)低于或等于 10 萬元時，獎金可提 10%；利潤高 于 10 萬元，低于 20 萬元時，低于 10 萬元的部分按 10%提成，高于 10 萬元的

?作者簡介：大家好我是碼莎拉蒂，CSDN博客專家?????? ??個人主頁：個人主頁 ??系列專欄：C語言試題200例 ??推薦一款模擬面試、刷題神器?? 點擊跳轉進入網站 1、題目 企業發放的獎金根據利潤提成。利潤(I)低于或等于 10 萬元時，獎金可提 10%；利潤高 于 10 萬…
閱讀更多...
[轉]大數據環境搭建步驟詳解（Hadoop，Hive，Zookeeper，Kafka，Flume，Hbase，Spark等安裝與配置）

[轉]大數據環境搭建步驟詳解（Hadoop，Hive，Zookeeper，Kafka，Flume，Hbase，Spark等安裝與配置）

大數據環境安裝和配置&#xff08;Hadoop2.7.7&#xff0c;Hive2.3.4&#xff0c;Zookeeper3.4.10&#xff0c;Kafka2.1.0&#xff0c;Flume1.8.0&#xff0c;Hbase2.1.1&#xff0c;Spark2.4.0等&#xff09; 系統說明搭建步驟詳述 一、節點基礎配置 二、Hadoop安裝和配置三、…
閱讀更多...
C# Any()和AII()方法

C# Any()和AII()方法

我們常常需要的另一類查詢是確定數據是否滿足某個條件&#xff0c;或者確保所有數據都滿足某個條件。例如&#xff0c;需要確定某個產品是否已經脫銷(庫存為 0)&#xff0c;或者是否發生了某個交易。LINQ 提供了兩個布爾方法&#xff1a;Any()和 All()&#xff0c;它們可以快速…
閱讀更多...
樹狀數組 + 位運算 LA 4013 A Sequence of Numbers

樹狀數組 + 位運算 LA 4013 A Sequence of Numbers

題目傳送門 題意&#xff1a;n個數&#xff0c;兩種操作&#xff0c;一是每個數字加x&#xff0c;二是查詢& (1 << T) 1 的個數 分析&#xff1a;因為累加是永遠的&#xff0c;所以可以離線處理。樹狀數組點是c[16][M] 表示數字x%(1 << j) 后的數字pos&#x…
閱讀更多...
【地理信息系統GIS】教案（七章全）第七章：3S技術綜合應用

【地理信息系統GIS】教案（七章全）第七章：3S技術綜合應用

文章目錄 第一節 3S技術概述第二節 GIS與RS的綜合應用第三節 GIS與GPS的綜合應用第四節 網絡GIS的綜合應用第一節 3S技術概述 1．什么是“3S” 技術？ 遙感（Remote Sensing ，RS）; 地理信息系統（Geographical information System ，GIS）; 全球定位系統（Global Positio…
閱讀更多...
初級圖像混合——線性混合操作

初級圖像混合——線性混合操作

addWeighted函數 這個函數的作用是&#xff0c;計算兩個數組&#xff08;圖像陣列&#xff09;的加權和。原型如下&#xff1a; void addWeighted(InputArray src1, double alpha, InputArray src2, double beta, double gamma, OutputArray dst, int dtype-1); 第一個參數&am…
閱讀更多...
C語言九十九之實現一個整數，它加上 100 后是一個完全平方數，再加上 168 又是一個完全平方數，請問該數是多少？

C語言九十九之實現一個整數，它加上 100 后是一個完全平方數，再加上 168 又是一個完全平方數，請問該數是多少？

?作者簡介：大家好我是碼莎拉蒂，CSDN博客專家?????? ??個人主頁：個人主頁 ??系列專欄：C語言試題200例 ??推薦一款模擬面試、刷題神器?? 點擊跳轉進入網站 一、題目 一個整數，它加上 100 后是一個完全平方數，再加上 168 又是一個完全平方數，請問該數是多…
閱讀更多...
最新文章

Copyright @ 2022~2023