- 浏览: 193552 次
- 性别:
- 来自: QD
文章分类
- 全部博客 (127)
- Struts2 (8)
- Web (27)
- 计算机基础 (2)
- 面试 (2)
- JQuery (4)
- MySQL (1)
- SQL (1)
- AJAX (3)
- Java (17)
- Javascript (36)
- 情感 (0)
- Oracle (7)
- Spring (5)
- FreeMarker (2)
- JSON (1)
- 表达式 (1)
- 线程 (4)
- WebService (10)
- MyEclipse (2)
- LDAP (1)
- Tomcat (1)
- NIO (1)
- Linux (1)
- ExtJS (4)
- Android (1)
- Dojo (2)
- Maven (9)
- Ant (7)
- 分布式 (1)
- Intellij IDEA (1)
最新评论
-
northc:
米饭军 写道如果文件已存在怎样避免应该会覆盖的
用Ant scp往远程linux传文件 -
米饭军:
如果文件已存在怎样避免
用Ant scp往远程linux传文件 -
luis025:
不支持列隐藏 硬伤
ExtJS4.0 分享Grid导出Excel插件(3.28更新支持4.1) -
rgbhje:
楼主大神,我把你的代码简单改了一小下,在4.2可以跑了
ExtJS4.0 分享Grid导出Excel插件(3.28更新支持4.1) -
rgbhje:
楼主大神,我把你的代码简单改了一小下,在4.2可以跑了
ExtJS4.0 分享Grid导出Excel插件(3.28更新支持4.1)
四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWi
- 博客分类:
- Web
- Javascript
四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异
网页可见区域宽: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
这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。
这四种浏览器分别为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 的解释与上面相同,只是把高度换成宽度即可。
注:以上也是转的,对自己有点参考而已,有些值要跟据页面方式而定!我用的Ajax就完全没法用上面的方法定高!
javaScript窗口属性:
网页可见区域宽: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
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得,很简单,很方便。
而在公司项目当中:
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原来是W3C的标准在作怪啊
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在页面中添加这行标记的话
在IE中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
注:在IE中“可见区域”基本不认可body,而必需使用documentElement!!!!
在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高)
获取窗口高宽:
var w= document.documentElement.offsetWidth;
var h=document.documentElement.offsetHeight;
发表评论
-
Ext Toolbar换行
2012-06-21 09:02 01.var oneTbar=new Ext.Toolba ... -
禁止select控件選擇
2012-06-20 20:06 0禁止select控件選擇 大家知道, 對於HTML控件 ... -
几种压缩算法原理介绍
2012-05-25 20:04 1359先给出一个JS实现的ZIP:http://stuartk ... -
ExtJS4.0 分享Grid导出Excel插件(3.28更新支持4.1)
2012-03-12 17:00 10879需要将ExtJS Grid 导出 Excel 的同学可以试一试 ... -
Ext Js 4.x 扩展自己的XType
2012-03-03 14:26 1553如果想用自己定制的XType(比如这里想用一个Obj存 ... -
(转)Javascript中大括号“{}”的多义性
2012-02-25 11:21 1010JS中大括号有四种语义作用语义1,组织复合语句,这是最常 ... -
function sleep
2012-02-17 19:16 883//毫秒 (function sleep(t){ ... -
不用递归,循环算0-9999之和(js)
2012-02-17 19:15 892var i=0,sum=eval(new Arra ... -
Augment.js 为旧浏览器增加现代Javascript的功能支持
2012-01-18 12:06 1071index: http://olivernn. ... -
Javascript中的~和~~
2011-12-30 15:58 880<script type="text/j ... -
js中的onchange和onpropertychange
2011-12-28 11:26 1842当一个HTML元素的属 ... -
DOCTYPE! HTML PUBLIC 声明规范
2011-12-26 17:38 1278DOCTYPE的常用声明:按照 HTML 4.01 ... -
parentNode、parentElement,childNodes、children
2011-12-26 17:38 929parentNode、parentElement,childN ... -
关于JS中的constructor与prototype
2011-12-22 19:53 1011我们都知道,在JS中有一个function的东西。一般人 ... -
各浏览器对document.getElementById等方法的实现差异
2011-12-21 13:15 931本文来自:http://www.cnblogs.com/sna ... -
全世界最短的IE判定
2011-12-20 15:45 802var ie = !-[1,]; ... -
document.getElementsByClassName的理想实现
2011-12-20 14:41 1436来自: 司徒正美 blog http://www.cnblo ... -
浏览器支持的JS版本及JS对象图
2011-12-20 10:38 1081来自zh.wikipedia.org的JavaScript ... -
JS判断浏览器能力
2011-12-15 20:47 1050对象/特征检测法 该方法是一种判断浏览器能力(而非浏览器 ... -
onunload和onbeforeunload区别
2011-12-15 18:54 972Onunload,onbeforeunload都是在刷 ...
相关推荐
在探讨`clientHeight`, `offsetHeight`, `scrollHeight`, `clientWidth`, `offsetWidth`, 和 `scrollWidth`这些概念之前,我们首先需要理解它们在Web开发中的重要性。这些属性帮助开发者了解和控制网页在不同浏览器...
### 四种浏览器对_clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和_scrollWidth 的解析 在前端开发过程中,我们经常会遇到需要获取页面元素尺寸的情况,这其中包括了元素的高度(`...
在网页开发中,理解和使用`clientHeight`、`offsetHeight`和`scrollHeight`这三个属性是至关重要的。它们都是JavaScript中用于获取元素尺寸的方法,但各有其特定的用途和应用场景。 首先,`clientHeight`属性返回一...
总结来说,offsetHeight和offsetWidth关注的是元素的边界,而clientHeight和clientWidth关注的是元素内容的大小,scrollHeight和scrollWidth关注的是元素内容的实际大小。理解这些概念,对于编写符合布局需求的CSS...
#### 四、offsetWidth 和 offsetHeight **offsetWidth** 和 **offsetHeight** 用于获取元素的总宽度和总高度,包括所有内容、内边距(padding)、边框(border),但不包括外边距(margin)。 - **offsetWidth**: ...
- `document.body.offsetWidth` 和 `document.body.offsetHeight` 包括了边线的宽度和高度。 - `document.body.scrollWidth` 和 `document.body.scrollHeight` 分别表示网页的完整宽度和高度,即使内容超过当前视口...
- **现代浏览器**:`offsetHeight`, `offsetWidth`, `clientHeight`, `clientWidth`, `scrollHeight`, `scrollWidth` 均支持。 - **Internet Explorer**:除了 `clientHeight` 和 `clientWidth` 外,其他属性也均...
- `document.body.offsetWidth` 和 `document.body.offsetHeight` 会包括边框和内填充,用于获取网页实际显示的宽度和高度。 - `document.body.scrollWidth` 和 `document.body.scrollHeight` 分别表示网页的完整...
- 而 `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 返回的则是浏览器窗口的可见尺寸。 3. **Opera浏览器**: - 不论是否定义W3C标准,`document.body.clientWidth` 和 `...
- `document.body.offsetWidth` 和 `document.body.offsetHeight`: 这两个属性返回`<body>`元素的总宽度和高度,包括边框。它们可以用于获取浏览器实际显示的页面内容宽度和高度,包括边框。 - `window....
JavaScript 获取文本框的值和浏览器高度和宽度值 在 Web 开发中,获取文本框的值和浏览器的高度和宽度值是非常重要的。这篇文章将详细介绍如何使用 JavaScript 获取文本框的值和浏览器的高度和宽度值。 获取文本框...
- 在支持的浏览器中使用 `window.innerWidth` 和 `window.innerHeight` 替代 `document.body.clientWidth` 和 `document.body.clientHeight`。 #### 四、总结 通过本文的介绍,我们可以了解到获取浏览器窗口大小的...
例如,在某些版本的IE浏览器中,`clientWidth` 和 `clientHeight` 的计算方式与其他浏览器有所不同。为了解决这些问题,可以采取以下策略: 1. **使用条件判断**:根据用户代理(User-Agent)信息选择不同的计算...
JavaScript 获取当前页面可视高度和宽度及浏览器宽度和高度的函数 在Web开发中,获取当前页面的可视高度和宽度,以及浏览器的宽度和高度是非常重要的。这篇文章将为大家讲解如何使用JavaScript来获取这些信息。 ...
- `document.body.clientHeight` 和 `document.body.clientWidth`:其他IE版本和其他浏览器使用。 #### 五、实际应用 在实际开发中,通常还需要考虑以下几点: 1. **性能优化**:频繁调用这些函数可能会对页面...
在JavaScript中,DOM元素的尺寸和位置是通过一系列属性来获取的,如offsetWidth、clientWidth、innerWidth等。这些属性对于布局计算和动态界面设计至关重要。以下是对这些属性和方法的详细解释: 1. **clientWidth...
对于浏览器兼容性问题,`clientWidth`、`clientHeight`、`offsetWidth`和`offsetHeight`在不同浏览器中可能有不同的计算方式。在IE6.0及更早版本,`clientWidth`和`clientHeight`会减去边框宽度,而在Firefox 1.0.6+...
通过上述介绍,我们可以看到`clientWidth`、`clientHeight`、`scrollWidth`、`scrollHeight`、`offsetWidth`和`offsetHeight`等属性在前端开发中的重要性。合理使用这些属性可以帮助我们更精确地控制页面布局和元素...
如果浏览器不支持这些属性,函数会检查`document.body.scrollHeight`是否大于`document.body.offsetHeight`,如果是,则使用`scrollHeight`。在其他情况下,如旧版的IE或Safari,使用`offsetHeight`。最后,如果页面...