`

四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWi

 
阅读更多

 

四种浏览器对 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; 


分享到:
评论

相关推荐

    clientHeight offsetHeight scrollHeight clientWidth详解

    在探讨`clientHeight`, `offsetHeight`, `scrollHeight`, `clientWidth`, `offsetWidth`, 和 `scrollWidth`这些概念之前,我们首先需要理解它们在Web开发中的重要性。这些属性帮助开发者了解和控制网页在不同浏览器...

    clientHeight

    ### 四种浏览器对_clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和_scrollWidth 的解析 在前端开发过程中,我们经常会遇到需要获取页面元素尺寸的情况,这其中包括了元素的高度(`...

    分析clientHeight、offsetHeight、scrollHeight

    在网页开发中,理解和使用`clientHeight`、`offsetHeight`和`scrollHeight`这三个属性是至关重要的。它们都是JavaScript中用于获取元素尺寸的方法,但各有其特定的用途和应用场景。 首先,`clientHeight`属性返回一...

    07-offsetHeight-scrollHeight-clientHeight-区别.md

    总结来说,offsetHeight和offsetWidth关注的是元素的边界,而clientHeight和clientWidth关注的是元素内容的大小,scrollHeight和scrollWidth关注的是元素内容的实际大小。理解这些概念,对于编写符合布局需求的CSS...

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解

    #### 四、offsetWidth 和 offsetHeight **offsetWidth** 和 **offsetHeight** 用于获取元素的总宽度和总高度,包括所有内容、内边距(padding)、边框(border),但不包括外边距(margin)。 - **offsetWidth**: ...

    js获取浏览器高度和宽度值(多浏览器)

    - `document.body.offsetWidth` 和 `document.body.offsetHeight` 包括了边线的宽度和高度。 - `document.body.scrollWidth` 和 `document.body.scrollHeight` 分别表示网页的完整宽度和高度,即使内容超过当前视口...

    javascript获取设置div的高度和宽度兼容任何浏览器.docx

    - **现代浏览器**:`offsetHeight`, `offsetWidth`, `clientHeight`, `clientWidth`, `scrollHeight`, `scrollWidth` 均支持。 - **Internet Explorer**:除了 `clientHeight` 和 `clientWidth` 外,其他属性也均...

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

    - `document.body.offsetWidth` 和 `document.body.offsetHeight` 会包括边框和内填充,用于获取网页实际显示的宽度和高度。 - `document.body.scrollWidth` 和 `document.body.scrollHeight` 分别表示网页的完整...

    关于获取各种浏览器可见窗口大小

    - 而 `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 返回的则是浏览器窗口的可见尺寸。 3. **Opera浏览器**: - 不论是否定义W3C标准,`document.body.clientWidth` 和 `...

    js获取浏览器高度和宽度值.pdf

    - `document.body.offsetWidth` 和 `document.body.offsetHeight`: 这两个属性返回`<body>`元素的总宽度和高度,包括边框。它们可以用于获取浏览器实际显示的页面内容宽度和高度,包括边框。 - `window....

    js获取文本框的值!js获取浏览器高度和宽度值[收集].pdf

    JavaScript 获取文本框的值和浏览器高度和宽度值 在 Web 开发中,获取文本框的值和浏览器的高度和宽度值是非常重要的。这篇文章将详细介绍如何使用 JavaScript 获取文本框的值和浏览器的高度和宽度值。 获取文本框...

    JS获取浏览器窗口大小

    - 在支持的浏览器中使用 `window.innerWidth` 和 `window.innerHeight` 替代 `document.body.clientWidth` 和 `document.body.clientHeight`。 #### 四、总结 通过本文的介绍,我们可以了解到获取浏览器窗口大小的...

    JavaScript 获取浏览器的显示区域大小信息

    例如,在某些版本的IE浏览器中,`clientWidth` 和 `clientHeight` 的计算方式与其他浏览器有所不同。为了解决这些问题,可以采取以下策略: 1. **使用条件判断**:根据用户代理(User-Agent)信息选择不同的计算...

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

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

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

    - `document.body.clientHeight` 和 `document.body.clientWidth`:其他IE版本和其他浏览器使用。 #### 五、实际应用 在实际开发中,通常还需要考虑以下几点: 1. **性能优化**:频繁调用这些函数可能会对页面...

    javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法

    在JavaScript中,DOM元素的尺寸和位置是通过一系列属性来获取的,如offsetWidth、clientWidth、innerWidth等。这些属性对于布局计算和动态界面设计至关重要。以下是对这些属性和方法的详细解释: 1. **clientWidth...

    javacript猎取当前屏幕大小_.docx

    对于浏览器兼容性问题,`clientWidth`、`clientHeight`、`offsetWidth`和`offsetHeight`在不同浏览器中可能有不同的计算方式。在IE6.0及更早版本,`clientWidth`和`clientHeight`会减去边框宽度,而在Firefox 1.0.6+...

    获取页面元素实际宽高的属性的使用

    通过上述介绍,我们可以看到`clientWidth`、`clientHeight`、`scrollWidth`、`scrollHeight`、`offsetWidth`和`offsetHeight`等属性在前端开发中的重要性。合理使用这些属性可以帮助我们更精确地控制页面布局和元素...

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

    如果浏览器不支持这些属性,函数会检查`document.body.scrollHeight`是否大于`document.body.offsetHeight`,如果是,则使用`scrollHeight`。在其他情况下,如旧版的IE或Safari,使用`offsetHeight`。最后,如果页面...

Global site tag (gtag.js) - Google Analytics