`
kaowww153
  • 浏览: 73112 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

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

分享到:
评论

相关推荐

    javascript获取滚动条高度 页面宽度与高度

    javascript 获取滚动条高度 页面宽度 页面高度 教程

    JavaScript解决跨域滚动条

    主程序无法获取到子程序页面的高度和宽度,所以出现双滚动条问题。通过引用两个js解决此方法。

    JS获取各种高度宽度1

    JS获取各种高度宽度:浏览器窗口滚动条的位置、元素的几何尺寸1)关于 pageX, clienX,offsetX,layerXpageX:鼠标在页面上的位置,从

    scrollbarWidth:获取滚动条宽度

    获取滚动条的宽度。 用 设置scrollbarWidth.js。 &lt; script src =" scrollbarWidth.min.js " &gt; &lt;/ script &gt; 初始化功能并获取滚动条宽度。 // Init web global scrollbarWidth ( ) ; // 17 // You ...

    javascript常用对象梳理

    scrollbar:指定当前窗口文档大于窗口时是否有滚动条,选项的值及含义与 toolbar相同; resizable:指定窗口是否可改变大小,选项的值及含义与toolbar相同; width:以像素为单位指定窗口的宽度,已被...

    程序天下:JavaScript实例自学手册

    17.8 窗体滚动条随文字增加自动滚动 17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码(二) 18.3 在线测试...

    《程序天下:JavaScript实例自学手册》光盘源码

    17.8 窗体滚动条随文字增加自动滚动 17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码(二) 18.3 在线测试...

    JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合

    因为浏览器的兼容问题,如果使用javascript获取这些数值是一个相当痛苦的过程。好在JQuery提供了简单优雅,并且兼容的解决... 获取滚动条的位置 代码如下: //获取滚动条到顶部的垂直高度 $(document).scrollTop(); //获

    JavaScript获取网页、浏览器、屏幕高度和宽度汇总

    经常发现在写JavaScript的时候,都需要用到网页、浏览器或屏幕的高度和宽度来解决布局定位的问题,时常前用后忘,要不就是在网上search,干脆自己总结一下,这样也方便再次使用,省时省力。 网页可见区域宽:...

    JavaScript网页特效范例宝典源码

    实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用图片实现质感导航条 72 1.9 下拉菜单式导航条 73 实例047 二...

    Javascript获取窗口(容器)的大小及位置参数列举及简要说明

    Javascript获取窗口(容器)的大小及位置一系列的东西比较多,容易混淆,在这里列举及简要说明下: 属性方法说明: clientX 相对文档的水平坐标; clientY 相对文档的垂直坐标; offsetX 相对容器的水平坐标; offsetY ...

    viewportwidth.js:一种确定准确的跨浏览器视口宽度的解决方案

    视口宽度.js 用于确定准确的跨浏览器视口宽度的解决方案。 更新 03/07/2015 Chrome、Opera、Safari 和 Firefox 都更新了渲染引擎,以在此问题上... 在 Chrome 和 Safari 中,如果页面上存在滚动条, window.innerWid

    GetViewportWidth:一种使用JavaScript获取视口宽度的简单方法

    允许您使用JavaScript获取视口的宽度。 大多数人依赖window.innerWidth或document.documentElement.clientWidth,它们并不总是准确地报告CSS媒体查询中使用的视口宽度。 例如,Chrome中的视口宽度根据滚动条是否...

    JavaScript 空间坐标的使用

    视口坐标需要知道滚动条位置才可以进行计算,有以下几种方式获取滚动位置 方法 说明 注意 window.innerWidth 视口宽度 包括滚动条(不常用) window.innerHeight 视口高度 包括滚动条(不常用) document....

    javascript获取元素偏移量的方法有哪些

    包括元素的宽度,(可见的)垂直滚动条的高度,左边框高度和右边框高度。 3、offsetLeft: 元素的左外边框至包含元素的左内边框之间的像素距离; 3、offsetTop: 元素的上外边框至包含元素的上内边框之间的像素距离;

    viewportSize:使用JavaScript获取CSS视口的大小

    允许您使用JavaScript获取CSS视口的宽度和高度。 作者:泰森Matanich - 执照:麻省理工学院 演示: : 更多信息: : 测试: : 我为什么要使用它? 大多数人依赖window.innerWidth , document....

    JavaScript常用脚本汇总(三)

    本文给大家分享的常用脚本有通过数组,拓展字符串拼接容易导致性能的问题、页面 视口 滚动条的位置的辅助函数、调节元素透明度的函数、获取鼠标位置的几个通用的函数、使用cssdisplay属性来切换元素可见性的一组函数...

    大名鼎鼎SWFUpload- Flash+JS 上传

    在FireFox中,如果窗口的滚动条没有回滚到顶部,那么Flash无法加载 Race-conditions when files are cached 兼容ASP.Net Forms SWFUpload v2 延续了SWFUpload的设计目标,将UI分离以交给开发人员控制和后续扩展 ...

    ymprompt消息提示组件4.0【js插件弹出框美化版】

    如:&lt;script type="text/javascript" src="ymPrompt.js"&gt;&lt;/script&gt; 2、在页面中引入对应的皮肤文件的CSS,如: 3、自定义组件的默认配置信息(此步骤可选,该方法可以在任意时间调用) 页面的js中通过ymPrompt....

Global site tag (gtag.js) - Google Analytics