`
kaowww153
  • 浏览: 74531 次
  • 性别: 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来获取滚动条的高度、页面的宽度和高度。 ...

    解决多种浏览器获取滚动条高度

    - 如果需要同时获取滚动条的宽度和高度,可以参考类似的方法,只是需要将获取滚动位置的逻辑替换为获取宽度或高度的逻辑。 #### 六、总结 通过上述方法,我们可以有效地解决在不同浏览器中获取滚动条高度的问题。...

    javascript获取页面各种高度

    通过获取滚动条的位置,可以实现实时滚动监测等功能。 - **document.body.scrollTop**: 获取垂直滚动条的当前位置,单位为像素。 - **document.body.scrollLeft**: 获取水平滚动条的当前位置,单位为像素。 ### 4....

    javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar

    本压缩包文件"javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar"包含了相关知识点的详细讲解,主要集中在JavaScript的DOM操作和窗口对象(Window)的属性与方法上。 1. **当前页面可视区域尺寸**...

    javascript 获取当前页面可视高度和宽度及浏览器宽度和高度的函数.pdf

    JavaScript 获取当前页面可视高度和宽度及浏览器宽度和高度的函数 在Web开发中,获取当前页面的可视高度和宽度,以及浏览器的宽度和高度是非常重要的。这篇文章将为大家讲解如何使用JavaScript来获取这些信息。 ...

    javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.pdf

    在JavaScript中,获取当前页面可视区域的尺寸以及浏览器窗口的尺寸是常见的需求,这有助于进行响应式设计或者处理滚动事件。以下是对标题和描述中提到的JavaScript函数的详细解释: 1. `getHeight()` 函数: 这个...

    js获取屏幕的高度与宽度

    document.body.scrollWidth和document.body.scrollHeight提供了没有水平和垂直滚动条时,整个页面内容的总宽度和高度。而document.body.scrollTop和document.body.scrollLeft则分别表示页面已经向上和向左滚动的像素...

    Javascript 获取页面高度(多种浏览器)

    总之,获取页面高度和宽度是 JavaScript 开发中的常见任务,但需要注意浏览器的兼容性和差异。正确的方法是使用兼容性好的代码,以确保在所有主流浏览器中都能得到期望的结果。理解 `document.body` 和 `document....

    javascript 获取网页高度宽度.pdf

    以下是一些关于如何使用JavaScript获取网页高度、宽度以及滚动位置的关键知识点。 1. **获取窗口滚动位置:** - `getScrollTop()` 函数用于获取当前页面滚动条的垂直偏移量。这个函数通过检查 `document....

    javascript 获取当前面可视高度和宽度及浏览器宽度和高度的函数.docx

    通过上述介绍,我们了解了如何使用JavaScript获取当前页面可视区域的高度和宽度,以及浏览器窗口的宽度和高度。这些基本的尺寸信息是进行前端开发不可或缺的一部分,掌握了这些技能,可以更好地进行页面布局和响应式...

    JavaScript获取屏幕高度和宽度等信息

    `document.body.clientWidth`和`document.body.clientHeight`可以分别获取文档内容的宽度和高度(不包括滚动条)。 示例代码: ```javascript const bodyWidth = document.body.clientWidth; const bodyHeight = ...

    获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll

    在网页开发中,有时我们需要获取页面的某些特定尺寸和位置信息,例如页面高度、窗口高度以及滚动条的高度。这些信息对于实现动态布局、滚动事件处理或页面适配等任务至关重要。这里有两个JavaScript函数:`...

    iframe根据页面内容自适应高度和宽度

    然而,由于`iframe`的大小固定,当嵌入的页面内容高度或宽度超过`iframe`设定的尺寸时,可能会出现滚动条或者内容被截断的情况。为了解决这个问题,我们需要让`iframe`根据其内容自动调整高度和宽度。本篇文章将详细...

    javascript获取网页高度宽度.rar

    总结,JavaScript获取网页高度和宽度的方法多种多样,可以根据具体需求选择合适的方式。了解这些知识对于提升网页交互体验和实现动态布局至关重要。在教育领域,理解并熟练掌握这些技术可以帮助学生更好地构建动态、...

    JS获取浏览器的高度和宽度

    但请注意,这两个属性并不包括滚动条的宽度和高度。 在Internet Explorer中,获取浏览器视口宽度和高度的方法稍有不同: - `document.body.clientWidth` 返回BODY对象的实际宽度,不包括滚动条和边框。 - `document...

    JavaScript解决跨域滚动条

    在本例中,"JavaScript解决跨域滚动条"的问题,指的是当主程序和子程序页面位于不同的源下,导致主程序无法获取子程序页面的尺寸,从而引发双滚动条的显示。 为了解决这个问题,我们可以利用JavaScript中的两种主要...

    javascript 获取页面的高度及滚动条的位置的代码

    描述“javascript获取页面的高度及滚动条的位置的代码,需要的朋友可以参考下。”进一步明确指出,本文提供的是实现上述功能的JavaScript代码样例,方便有相关需求的开发者参考和使用。 标签“页面高度 滚动条位置...

    js模拟滚动条

    当用户滚动时,我们需要获取滚动元素的滚动高度和总高度,以及可视区域的高度,然后计算出当前滚动条应该显示的位置。这通常涉及到`element.scrollTop`,`element.scrollHeight`和`element.clientHeight`属性。 4....

    javascript实现滚动条

    滚动条是用户浏览超出视口内容的重要工具,而用JavaScript自定义或控制滚动条可以提供更加丰富的用户体验。 ### 1. 滚动事件 JavaScript提供了`scroll`事件,用于监听元素的滚动动作。当用户滚动页面或某个具有...

Global site tag (gtag.js) - Google Analytics