javascript 获取滚动条高度+常用js页面宽度与高度

标签: javascript 高度 js | 发表时间:2014-10-27 18:46 | 作者:zzc1684
出处:http://www.iteye.com
javascript 获取滚动条高度+常用js页面宽度与高度

/ ********************
 * 取窗口滚动条高度
 ****************** /
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

 



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [javascript 高度 js] 推荐:

javascript 获取滚动条高度+常用js页面宽度与高度

- - Web前端 - ITeye博客
javascript 获取滚动条高度+常用js页面宽度与高度 / ******************** * 取窗口滚动条高度 ****************** / function getScrollTop() {. return scrollTop; } / ******************** * 取窗口可视范围的高度 ******************* / function getClientHeight() {.

Google 推出 Javascript 测试工具 Goole JS Test

- ĐƋɳƞѵїχ - 谷奥——探寻谷歌的奥秘
Google JS Test是一个运行于V8 JavaScript引擎下的Javascript单元测试框架,其在Google内部负责对Chrome的快速JS执行速度进行测试,现在Google以开源工程开放大家使用. Google JS Test主要特性:. 超快的启动速度和执行时间,不需要在浏览器里运行.

Google 推出 JavaScript 测试工具 Google JS Test

- Tim - ITeye资讯频道
Google JS Test是一个运行于V8 JavaScript引擎下的JavaScript单元测试框架,其在Google内部负责对Chrome的快速JS执行速度进行测试,现在Google以开源工程开放给大家使用. Google JS Test主要特性:. 超快的启动速度和执行时间,不需要在浏览器里运行.

(总结)简体繁体转换JS(JavaScript)脚本

- - 服务器运维与网站架构|Linux运维|X研究
PS:前些时间有童鞋问我怎么把繁体网站自动辨认浏览器来切换成简体. 这个其实很简单,我在07年的时候的公司运营的香港讨论区就用过,只需加个JS脚本,再加几行html代码嵌入就OK. 现重新记录一下,有两个版本测试可用. 1、首先把下面这个链接放在提醒用户繁简转换的地方:. 繁体中文.

用javascript预加载图片、css、js的方法研究

- - 博客园_Ruby's Louvre
预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片、css、js这些静态文件可以被缓存),如果用户访问的页面里面的 css、js、图片被预加载了,用户打开页面的速度会快很多,提升用户体验. 在用到一些大图片展示的时候,预加载大图是很不错的方法,图片更快的被呈现给用户. 不多说了,作为一个前端攻城师都懂的,下面分享我做的测试和得到的结果.

网易前端云课堂,JavaScript程序设计:JS调试

- - CSDN博客推荐文章
本节主要通过一个加法器,介绍JS如何调试. 计算器
. . 1,一般调试JS,打印信息有如下三种:. a,用alert,缺点是每次都弹框. b,用console.log,这个数据量小还可以.

js 和 jquery 获取页面和滚动条的高度

- - Web前端 - ITeye博客
js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight && window.scrollMaxY) {. return {PageW:pageW, PageH:pageH, WinW:winW, WinH:winH}; }; //滚动条位置 function GetPageScroll() { var x, y; if(window.pageYOffset) {.

用js小类库获取浏览器的高度和宽度信息

- - 博客园_首页
在做项目时碰到了要在页面上显示一个浮动DIV层的效果. 本来做的是在页面居中时显示的,但后来经过自己的测试发现,当网页中出现了滚动条之后,那个浮动的DIV却还是在页面的顶部显示的. 因此当用户在一个较长内容的网页中点击某一个按钮显示DIV层会发现没有任何效果(其实已经在页面的顶部显示了),因此,我们需要准备的知道用户当前的浏览的位置的信息.

WebView JS 交互

- - ITeye博客
WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中,. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.

JS游戏引擎

- 米随随 - HTML5研究小组
If you don’t have anything better to do and want to help fellow redditors interested in JS game dev out, feel free to fork the list and modify it as you like.