`
f002489
  • 浏览: 273173 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

JS得到页面的各种尺寸

阅读更多

http://hi.baidu.com/330334037/blog/item/87866e126a09d12fdd5401c6.html

 

http://www.cnblogs.com/jeffwongishandsome/archive/2009/01/15/1359309.html

offsetTop、clientTop、scrollTop、offsetTop
网页可见区域宽: 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;

 

1、offsetLeft

假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。

obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。

obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。

obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。

我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。

例如:
<div id="tool">
<input type="button" value="提交">
<input type="button" value="重置">
</div>

“提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的距离,因为距其上边最近的是 “tool” 层的上边框。
“重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的距离,因为距其上边最近的是 “tool” 层的上边框。

“提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的距离,因为距其左边最近的是 “tool” 层的左边框。
“重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的距离,因为距其左边最近的是“提交”按钮的右边框。

以上属性在 FireFox 中也有效。

另 外:我们这里所说的是指 HTML 控件的属性值,并不是 document.body,document.body 的值在不同浏览器中有不同解释(实际上大多数环境是由于对 document.body 解释不同造成的,并不是由于对 offset 解释不同造成的),点击这里查看不同点。
标题:offsetTop 与 style.top 的区别

预备知识:offsetTop、offsetLeft、offsetWidth、offsetHeight

我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,style.top 也是可以的,二者的区别是:

一、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。

二、offsetTop 只读,而 style.top 可读写。

三、如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。
标题:clientHeight、offsetHeight和scrollHeight

我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释,这里说的是 document.body,如果是 HTML 控件,则又有不同,点击这里查看。

这四种浏览器分别为IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。

2、clientHeight
clientHeight
大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。

scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。

简单地说
clientHeight 就是透过浏览器看内容的这个区域高度
NS、 FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同,只是把高度换成宽度即可。

但是
FF 在不同的 DOCTYPE 中对 clientHeight 的解释不同, xhtml 1 trasitional 中则不是如上解释的。其它浏览器则不存在此问题。
标题:scrollTop、scrollLeft、scrollWidth、scrollHeight

3、scrollLeft
scrollTop 是“卷”起来的高度值,示例:

<div style="width:100px;height:100px;background-color:#FF0000;overflow:hidden;" id="p">
<div style="width:50px;height:300px;background-color:#0000FF;" id="t">如果为 p 设置了 scrollTop,这些内容可能不会完全显示。</div>
</div>
<script type="text/javascript">
var p = document.getElementById("p");
p.scrollTop = 10;
</script>

由于为外层元素 p 设置了 scrollTop,所以内层元素会向上卷。

scrollLeft 也是类似道理

我们已经知道 offsetHeight 是自身元素的宽度

而 scrollHeight 是内部元素的绝对宽度,包含内部元素的隐藏的部分。

上述中 p 的 scrollHeight 为 300,而 p 的 offsetHeight 为 100。

scrollWidth 也是类似道理。

IE 和 FireFox 全面支持,而 Netscape 和 Opera 不支持 scrollTop、scrollLeft(document.body 除外)。
发表时间:2007-10-15 20:20:16
标题:offsetTop、offsetLeft、offsetWidth、offsetHeight


4、clientLeft  

返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离,可以理解为边框的长度

一直以来对offsetLeft,offsetTop,scrollLeft,scrollTop这几个方法很迷糊,花了一天的时间好好的学习了一下.得出了以下的结果:
1.offsetTop     :
当前对象到其上级层顶部的距离.
不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.

2.offsetLeft :
当前对象到其上级层左边的距离.
不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.

3.offsetWidth :
当前对象的宽度.
与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值

4.offsetHeight :
与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值

5.offsetParent   :
当前对象的上级层对象.
注意.如果对象是包括在一个DIV中时,此DIV不会被当做是此对象的上级层,(即对象的上级层会跳过DIV对象)上级层是Table时则不会有问题.
利用这个属性,可以得到当前对象在不同大小的页面中的绝对位置.
得到绝对位置脚本代码
1function GetPosition(obj)
2{
3 var left = 0;
4 var top   = 0;
5
6 while(obj != document.body)
7 {
8        left = obj.offsetLeft;
9        top   = obj.offsetTop;
10
11        obj = obj.offsetParent;
12 }
13
14 alert("Left Is : " + left + "\r\n" + "Top   Is : " + top);
15}


6.scrollLeft :
对象的最左边到对象在当前窗口显示的范围内的左边的距离.
即是在出现了横向滚动条的情况下,滚动条拉动的距离.

7.scrollTop
对象的最顶部到对象在当前窗口显示的范围内的顶边的距离.
即是在出现了纵向滚动条的情况下,滚动条拉动的距离.


我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释,这里说的是 document.body,如果是 HTML 控件,则又有不同,点击这里查看。

这四种浏览器分别为IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。

clientHeight
大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。

scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。

简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、 FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同,只是把高度换成宽度即可。

说明
以 上基于 DTD HTML 4.01 Transitional,如果是 DTD XHTML 1.0 Transitional 则意义又会不同,在 XHTML 中这三个值都是同一个值,都表示内容的实际高度。新版本的浏览器大多支持根据页面指定的 DOCTYPE 来启用不同的解释器。

 

下载或浏览测试文件:http://download.csdn.net/source/487156

分享到:
评论

相关推荐

    js移动端页面生成图片demo(基于html2Canvas.js).zip

    "js移动端页面生成图片demo(基于html2Canvas.js).zip"是一个示例项目,它演示了如何利用html2Canvas.js这个JavaScript库在移动端实现这一功能。下面我们将深入探讨相关知识点。 1. **html2Canvas.js**: 这是一个...

    js判断页面的不同分辨率调用不同的css

    在网页设计中,为了确保网站在各种屏幕尺寸和设备上都能提供良好的用户体验,开发者常常需要根据用户设备的分辨率来调整页面样式。JavaScript 提供了一种动态的方法,可以在运行时检测浏览器窗口的分辨率,并据此...

    js代码:网页中的adobePDF显示,js控制pdf页面滚动

    除了简单的显示PDF文档外,有时还需要进一步的交互性,比如通过JavaScript控制PDF页面的滚动。这可以通过监听DOM事件并使用相应的API来实现。 ##### 2.1 监听滚动事件 可以使用JavaScript的`window.onscroll`事件...

    flexible.js_flexible.js下载_flexible.js下载_适配js文件_

    它以其独特的响应式设计和智能适配能力,广泛应用于Echarts等图表库,以确保数据可视化在各种屏幕尺寸上都能得到理想的展示效果。 flexible.js的核心功能在于动态调整页面的布局和元素尺寸,以适应不同分辨率和DPR...

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

    本文将深入探讨如何使用 JavaScript 在不同浏览器中获取页面高度。 首先,我们有两个基本属性可以用来获取页面的宽度和高度:`document.body.clientWidth` 和 `document.body.clientHeight`。这两个属性分别返回 `...

    js动态的获取浏览器页面放大缩小的比例.pdf

    在JavaScript中,动态获取浏览器页面放大缩小的比例是一个常见的需求,特别是在进行响应式设计或精确的图形渲染时。这个过程涉及到浏览器窗口的尺寸变化监听、设备像素比(devicePixelRatio)的检测以及对不同浏览器...

    仿京东注册页面源码

    与此同时,JavaScript的加入使页面能够响应用户的操作,比如输入验证和动态页面内容更新。 正则表达式在前端验证中起着不可或缺的作用。通过正则表达式的应用,开发者可以对用户的输入进行格式校验,例如验证邮箱...

    js获取屏幕的高度与宽度

    总结来说,通过使用JavaScript提供的各种属性和方法,开发者能够获得页面元素的尺寸信息,包括屏幕尺寸、滚动区域尺寸、内容区域尺寸等。在获取尺寸的过程中,除了需要了解不同属性和方法的应用场景,还需要注意...

    各种js特效

    在网页设计中,JS特效极大地提升了用户体验,使页面更具吸引力和互动性。本资源库包含了数百种JavaScript特效,涵盖了从动画效果、数据可视化到用户交互等各个方面,是你进行前端开发或提升网站体验的宝贵资料。 1....

    web网页聊天功能页面模板

    本资源提供了一个紫色主题的Web在线聊天软件页面模板,名为"Chatriq",专为手机端设计,具有响应式布局,能够适应不同设备的屏幕尺寸,确保用户在任何设备上都能获得良好的聊天体验。以下将详细解析这个模板包含的...

    javascript中获得屏幕中和浏览器中所有的尺寸方法

    在JavaScript中,获取屏幕与浏览器窗口的尺寸是前端开发中常用的一个功能,这些尺寸信息能够帮助开发者更好地适配不同设备的显示效果,实现响应式设计。以下是对标题、描述及部分代码示例中的知识点进行详细解析。 ...

    js网页特效demo

    JavaScript(简称JS)是一种轻量级的编程语言,主要用于网页和网络应用的开发。它能够直接在客户端浏览器上运行,无需服务器支持,极大地提升了网页的交互性和动态性。本资源包"js网页特效demo"主要包含了一系列使用...

    javascript获取隐藏元素(display:none)的高度和宽度的方法

    在前端开发中,经常需要对页面元素进行操作,包括获取元素的尺寸信息。然而,当我们尝试获取一个CSS样式为display:none的元素的高度和宽度时,会发现常规的JavaScript方法无法直接获取这些尺寸值,因为display:none...

    HTML5 SVG动画404页面,活泼有趣,适合用在网站404页面,兼容主流浏览器

    5. **响应式设计**:确保404页面在不同设备和屏幕尺寸上都能正常显示和交互,这可能涉及到调整SVG的尺寸和布局,以及适配触屏事件。 6. **用户体验**:设计404页面时,除了视觉效果,还要考虑用户体验。提供清晰的...

    js控制上传图片的大小

    3. **检测图片尺寸**:通过创建一个`&lt;img&gt;`元素,并将其`src`设置为读取得到的Data URL,可以在图片加载完成后获取其宽度和高度。 4. **比较与反馈**:根据预设的尺寸阈值与实际图片尺寸进行比较,如果超出限制,则...

    全屏响应式创意视差动画效果404页面模板

    它可以大大节省时间和精力,并且由于已经考虑了各种设计元素的搭配,通常能保证页面的专业外观和用户体验。 7. **Zp_demo.demohuo.top_54**:这可能是压缩包内的一个文件或项目,可能是演示示例的代码文件或者预览...

    【JavaScript源代码】JS如何实现页面截屏功能实例代码.docx

    ### JavaScript 实现页面截屏功能详解 #### 一、引言 在前端开发中,“页面截屏”是一项常见且实用的功能。例如,在某些场景下,用户可能需要将当前浏览的页面快速生成为海报或者分享图进行传播。由于浏览器本身并...

    仿京东商城H5主页面源代码,html、css、js 下载

    在这个项目中,JavaScript将被用来处理各种交互逻辑,例如导航栏的下拉菜单、搜索框的自动补全、商品的添加到购物车功能、页面滚动时的固定导航栏等。开发者可能使用了jQuery或者更现代的库如React、Vue或Angular来...

    js实现鼠标拉框截图

    在JavaScript(简称JS)编程中,实现鼠标拉框截图是一项常见的功能,特别是在Web应用中,如在线编辑器、协作工具等。这个功能的核心是通过监听鼠标事件,结合HTML5的Canvas API来完成图像的选择和捕获。以下是实现这...

    【JavaScript源代码】Vue实现大屏页面的屏幕自适应.docx

    ### Vue实现大屏页面的屏幕自适应 #### 知识点概述 ...这种方法不仅能够确保页面在各种尺寸的大屏上都能呈现出良好的视觉效果,还能提高用户体验,使用户无论在何种设备上都能获得一致且流畅的浏览体验。

Global site tag (gtag.js) - Google Analytics