博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript 获取滚动条高度+常用js页面宽度与高度[转]
阅读量:5236 次
发布时间:2019-06-14

本文共 2569 字,大约阅读时间需要 8 分钟。

/********************

* 取窗口滚动条高度
******************/
function getScrollTop()
{
var scrollTop=0;
if(document.documentElement&&document.documentElement.scrollTop)
{
scrollTop=document.documentElement.scrollTop;
}
else if(document.body)
{
scrollTop=document.body.scrollTop;
}
return scrollTop;
}

/********************

* 取窗口可视范围的高度
*******************/
function getClientHeight()
{
var clientHeight=0;
if(document.body.clientHeight&&document.documentElement.clientHeight)
{
var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
}
else
{
var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
}
return clientHeight;
}

/********************

* 取文档内容实际高度
*******************/
function getScrollHeight()
{
return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}

在IE中:

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在FireFox中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
?
在 Opera中:
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
而如果没有定义W3C的标准,则
IE为:
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
Opera为:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
真是一件麻烦事情,其实就开发来看,宁可少一些对象和方法,不使用最新的标 准要方便许多啊。

//

网页可见区域宽:

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

转载于:https://www.cnblogs.com/itecho/archive/2011/07/22/2113847.html

你可能感兴趣的文章
[Linux]PHP-FPM与NGINX的两种通讯方式
查看>>
Java实现二分查找
查看>>
架构图-模型
查看>>
黑马程序员_Java基础枚举类型
查看>>
UIImage 和 iOS 图片压缩UIImage / UIImageVIew
查看>>
ajax向后台传递数组
查看>>
疯狂JAVA16课之对象与内存控制
查看>>
[转载]树、森林和二叉树的转换
查看>>
软件测试-----Graph Coverage作业
查看>>
django ORM创建数据库方法
查看>>
创建Oracle synonym 详解
查看>>
php7 新特性整理
查看>>
RabbitMQ、Redis、Memcache、SQLAlchemy
查看>>
知识不是来炫耀的,而是来分享的-----现在的人们却…似乎开始变味了…
查看>>
口胡:[HNOI2011]数学作业
查看>>
中国剩余定理
查看>>
uva 10137 The trip
查看>>
数据库锁机制及乐观锁,悲观锁的并发控制
查看>>
03 线程池
查看>>
201771010125王瑜《面向对象程序设计(Java)》第十三周学习总结
查看>>