獲取網頁內容區域各類高/寬彙總

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 相對文檔的水平座標+垂直方向滾動的量