js各種寬高的理解

1.window.innerHeight、window.outerHeight  窗口的外層的高度/內層高度

 

2.window.innerWidth/window.outerWidth  窗口的外層的寬度/內層寬度

 

3.window.screen包含有關用戶屏幕的信息

　　window.screen.width

　　window.screen.height

　　window.screen.availWidth(可視化的寬度)

　　window.screen.availHeight(可視化的高度)

　　window.screenTOP

　　window.screenLeft

4.與document下面的client寬高

clientWidth/clientHeight:元素的可視部分寬度和高度，即padding+content

如果沒有滾動條，即為元素設定的寬高

有滾動條，本來寬高-滾動條的寬高

例如：

 1 body{
 2 
 3 　　border:20px solid red; 4 5 　　margin:10px ; 6 7 　　padding:40px; 8 9 　　background:blue; 10 11 　　width:500px; 12 13 　　height:350px; 14 15 　　overflow:scroll; 16 17 }

console.log(document.body.clientWight) //500+40*2=530

console.log(document.body.clientHeight) //350+40*2=430

 

 

 

5.offsetParent

6.document下面的scroll，獲取瀏覽器的寬度/高度

 document.body.scrollWidth

document.body.scrollHeight

document.body.scrollLeft

document.body.scrollTop

7.兼容ie，chrome,火狐

 

//獲取可視區域的高度
var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

//設置div高度為瀏覽器的高度

document.getElementById("boxWrapper").style.height=clients+"px"; 

　　

 
//網頁滾動到底部或者頂部的加載
function show() {

        var showId = document.getElementById("box") //兼容ie,獲取可視區域的高度 var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //獲取滾動條scrollTop的高度 var scrollTop=document.body.scrollTop; //獲取整個滾動的高度 var wholeHeight=document.body.scrollHeight; //可視區域加上卷上去的部分等於整個網頁的高度，滾到了底部 if(clients+scrollTop>=wholeHeight){ alert("我已經滾動底部了") } //卷上去的部分等於0 if(scrollTop==0){ alert("我已經是頂部了") } } window.onscroll=show

 

    var div=document.getElementById("box")
    //div滾動到底部頂部的加載
    function divScroll(){ var wholeHeight=div.scrollHeight; var scrollTop=div.scrollTop; var divHeight=div.clientHeight;//獲取div的高度 if(scrollTop+divHeight>=wholeHeight){ alert("div滾動到底部") } if(scrollTop==0){ alert("div滾動到頭部了") } } div.onscroll=divScroll