JS元素宽高、可视区域宽高、滚动区域宽高和已滚动的高度

1.文档的高,屏幕的文档区域的高

document.body.clientHeight

2.有效的高,屏幕可视的高

document.documentElement.clientHeight

3.屏幕的总高度

document.documentElement.scrollHeight  

4.滚动的高度

document.documentElement.scrollTop

js代码

<script>
// 获取有效的宽和高,屏幕可视的宽 高
var winX = document.documentElement.clientWidth;
var winY = document.documentElement.clientHeight;
alert(winX);
alert(winY);

// 获取body文本区域的宽和高
var winXX = document.body.clientWidth;
var winYY = document.body.clientHeight;
alert(winXX);
alert(winYY);

// 获取总的宽和高
var winXXX = document.documentElement.scrollWidth;
var winYYY= document.documentElement.scrollHeight;
alert(winXXX);
alert(winYYY);

//滚动的高度 此法存在兼容性问题
window.onscroll = function(){
//判断用户使用的浏览器是否为Chrome
if( navigator.userAgent.indexOf("Chrome") > -1){
//针对谷歌浏览器
var winY = document.body.scrollTop;
}else{
//针对IE、火狐浏览器
var winY = document.documentElement.scrollTop;
}
document.title = winY;
};
script>
html>

转载于:https://www.cnblogs.com/wangjie-01/p/4803918.html

你可能感兴趣的:(JS元素宽高、可视区域宽高、滚动区域宽高和已滚动的高度)