javascript 页面高度宽度等

最新推荐文章于 2024-05-04 14:55:11 发布

hu_bird

最新推荐文章于 2024-05-04 14:55:11 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/hu_bird/article/details/2316484

本文提供了一种方法来获取网页的各种尺寸信息及滚动条的位置。通过JavaScript代码，可以实现对于网页可见区域、正文宽高、滚动条位置等属性的读取。适用于不同浏览器环境。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页可见区域宽： 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;
当前鼠标位置的X坐标：document.body.scrollLeft+event.clientX; 网页横向滚动条的左位置 + 事件源的X坐标
当前鼠标位置的Y坐标：document.body.scrollTop+event.clientY;

附以前收集的代码作者枫岩

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title> 代码实例：获取页面滚动高度 scrollTop（For: IE5.0+、Firefox1.06+ ...） </title>

var w3c=(document.getElementById)? true: false;

var agt=navigator.userAgent.toLowerCase();

var ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1) && (agt.indexOf("omniweb") == -1));

function IeTrueBody(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;

}

function GetScrollTop(){

return ie ? IeTrueBody().scrollTop : window.pageYOffset;

}

function getPageScroll(){

var yScroll;

if (self.pageYOffset) {

yScroll = self.pageYOffset;

} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict

yScroll = document.documentElement.scrollTop;

} else if (document.body) {// all other Explorers

yScroll = document.body.scrollTop;

}

arrayPageScroll = new Array('',yScroll)

return arrayPageScroll;

}

function getPageSize(){

var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY) {

xScroll = document.body.scrollWidth;

yScroll = window.innerHeight + window.scrollMaxY;

} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac

xScroll = document.body.scrollWidth;

yScroll = document.body.scrollHeight;

} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari

xScroll = document.body.offsetWidth;

yScroll = document.body.offsetHeight;

}

var windowWidth, windowHeight;

if (self.innerHeight) { // all except Explorer

windowWidth = self.innerWidth;

windowHeight = self.innerHeight;

} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode

windowWidth = document.documentElement.clientWidth;

windowHeight = document.documentElement.clientHeight;

} else if (document.body) { // other Explorers

windowWidth = document.body.clientWidth;

windowHeight = document.body.clientHeight;

}

// for small pages with total height less then height of the viewport

if(yScroll < windowHeight){

pageHeight = windowHeight;

} else {

pageHeight = yScroll;

}

if(xScroll < windowWidth){

pageWidth = windowWidth;

} else {

pageWidth = xScroll;

}

arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight,xScroll,yScroll)

return arrayPageSize;

//return pageHeight;

}

</script>

</head>

<body>

<a href="javascript:alert(GetScrollTop());">GetScrollTop()滚动条高度1</a>

<a href="javascript:alert(getPageScroll()[1]);">getPageScroll()[1]滚动条高度2</a>

<a href="javascript:alert(getPageSize()[0].toString()+'/'+getPageSize()[1].toString()+'/'+getPageSize()[2].toString()+'/'+getPageSize()[3].toString()+'/'+getPageSize()[4].toString()+'/'+getPageSize()[5].toString());">getPageSize()页面宽度,高度,窗口宽度,高度</a>

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

</body>

</html>