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

時間 2019-12-13

標籤 jquery height javascript 總結獲取屏幕高度欄目 JQuery 简体版

原文原文鏈接

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

javascript

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.onscroll=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中，移到這裏來！

                 }
})

html