獲取網頁內容區域各種高/寬匯總

js獲取屏幕高度和寬度

 window.onload = function(){

        // 獲取屏幕高度 document.documentElement.clientHeight

        console.log(document.documentElement.clientHeight);

        // 獲取屏幕寬度 document.documentElement.clientWidth

        console.log(document.documentElement.clientWidth);

    }

jq獲取屏幕高度和寬度

$(window).innerHeight();

$(window).innerWidth();

js，獲取某元素距離屏幕頂端的間距：

document.onscroll=function(){
　　var a=document.getElementsByClassName('box')[0].offsetTop;
　　var sTop = document.body.scrollTop;
　　var result = a - sTop;
　　console.log(result)
}

jq,獲取某元素距離屏幕頂端的間距：

$(window).scroll(function(){
　　var a=$(".box").offset().top;
　　var b=$(window).scrollTop();
　　var c=a-b;
　　console.log(c);
　　if(c==100){
　　　　alert(111)
　　}
 })

 

 

function a(){
"屏幕寬高為："+screen.width+"*"+screen.height；
}
其它：
網頁可見區域寬：document.body.clientWidth 
網頁可見區域高：document.body.clientHeight 
網頁可見區域寬：document.body.offsetWidth (包括邊線的寬) 
網頁可見區域高：document.body.offsetHeight (包括邊線的寬) 
網頁正文全文寬：document.body.scrollWidth 
網頁正文全文高：document.body.scrollHeight 
網頁被卷去的高：document.body.scrollTop 
網頁被卷去的左：document.body.scrollLeft 
網頁正文部分上：window.screenTop 
網頁正文部分左：window.screenLeft 
屏幕分辨率的高：window.screen.height 
屏幕分辨率的寬：window.screen.width 
屏幕可用工作區高度：window.screen.availHeight 
屏幕可用工作區寬度：window.screen.availWidth 
HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 
scrollHeight: 獲取對象的滾動高度。 
scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離 
scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離 
scrollWidth:獲取對象的滾動寬度 
offsetHeight:獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的高度 
offsetLeft:獲取對象相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置 
offsetTop:獲取對象相對於版面或由 offsetTop 屬性指定的父坐標的計算頂端位置 
event.clientX 相對文檔的水平座標 
event.clientY 相對文檔的垂直座標 
event.offsetX 相對容器的水平坐標 
event.offsetY 相對容器的垂直坐標 
document.documentElement.scrollTop 垂直方向滾動的值 
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量