`
cruih
  • 浏览: 79483 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

关于clientWidth,clientHeight,offsetWidth,offsetHeight 等属性的意思

    博客分类:
  • js
阅读更多

 

网页可见区域宽: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.width; 

屏幕分辨率的高:window.screen.height; 

屏幕可用工作区宽度:window.screen.availWidth; 

屏幕可用工作区高度:window.screen.availHeight;

 

 

有时会出现取不到值的情况,是因为我的HTML文件头部加了文档类型。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

或者

<!DOCTYPE html>

 

解决办法:

1.去掉头部文档类型。(不推荐此方法)

2.把document.body.scrollTop和document.body.scrollLeft这两个家伙改个名字,改成:document.documentElement.scrollTop 和document.documentElement.scrollLeft。当然document.body.clientWidth和document.body.clientHeight也要改名字了,改为:document.documentElement.clientWidth和document.documentElement.clientHeight

分享到:
评论
1 楼 softor 2013-07-26  
我在你这个页面用chrome里的console打印document.body.clientWidth,显示1349,显然不是可视区域。

怎么解释?

我认为,在标准模式下
document.documentElement.clientHeight 这个才是可视区域,
document.body.clientWidth 这个是body的元素高度

相关推荐

    clientHeight offsetHeight scrollHeight clientWidth详解

    掌握 `clientHeight`, `offsetHeight`, `scrollHeight`, `clientWidth`, `offsetWidth`, 和 `scrollWidth` 这些属性的使用,对于优化网页布局、提高用户体验以及确保跨浏览器兼容性至关重要。不同的浏览器可能对这些...

    分析clientHeight、offsetHeight、scrollHeight

    此外,`clientWidth`、`offsetWidth`和`scrollWidth`与上述三个属性类似,只是对应元素的宽度。理解这些属性的差异和用途,能够帮助开发者更好地控制网页元素的布局和交互,提高用户体验。 总的来说,`clientHeight...

    clientHeight

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

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

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

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

    **offsetWidth** 和 **offsetHeight** 用于获取元素的总宽度和总高度,包括所有内容、内边距(padding)、边框(border),但不包括外边距(margin)。 - **offsetWidth**: 获取元素相对于版面或由父坐标 `...

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

    在JavaScript中,DOM元素的尺寸和位置是网页布局的关键因素,`offsetWidth`、`clientWidth`、`innerWidth`以及一系列相关属性方法用于获取和处理这些信息。这些属性可以帮助开发者精确地控制页面元素的显示效果,...

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

    本文将详细介绍`clientWidth`、`clientHeight`、`scrollWidth`、`scrollHeight`、`offsetWidth`、`offsetHeight`等属性及其应用场景。 #### `clientWidth` 和 `clientHeight` - **定义**:`clientWidth`用于获取...

    JS获取各种宽度、高度的简单介绍

    需要注意的是,CSS中的margin属性与clientWidth、offsetWidth、clientHeight、offsetHeight等属性无关,因为margin表示的是元素外部的空间,而不影响元素本身的尺寸。 假设有一个HTML元素obj,它具有offsetTop和...

    html学习心得,我感觉很好

    OFFSETHEIGHT 属性用于获取对象相对于版面或由父坐标offsetParent 属性指定的父坐标的高度。 45. OFFSETLEFT 属性 OFFSETLEFT 属性用于获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。 46...

    JS获取一个未知DIV高度的方法

    首先,我们要了解JavaScript中与元素尺寸相关的几个主要属性:clientHeight、offsetHeight、clientWidth和offsetWidth。clientHeight属性表示元素内部的高度(不包括边框、滚动条或边距),而offsetHeight则包括了...

    JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性

    2. clientWidth 和 clientHeight 属性代表的是元素的内容区域加上内边距后的尺寸,不包括边框和滚动条。这个尺寸是页面布局和渲染时经常用到的尺寸。 3. scrollWidth 和 scrollHeight 属性代表了元素的滚动区域的总...

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

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

    jquery BS,dialog控件自适应大小

    文章还提到了CSS中的margin属性,它与clientWidth、offsetWidth、clientHeight、offsetHeight等属性无关,这是因为在计算元素的宽度和高度时,margin总是被排除在外。 总之,要实现对话框控件的自适应大小,除了...

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

    在定位元素时,还可以使用`scrollLeft`、`scrollWidth`、`clientWidth`、`offsetWidth`等属性,以及`event`对象的相关属性,如`clientX`、`clientY`、`offsetX`、`offsetY`等,帮助我们精确地计算元素的位置和相对...

    js获取页面控件坐标.pdf

    此外,在 HTML 文档中,我们还可以使用其他属性来获取元素的坐标,例如 offsetWidth 和 offsetHeight 属性可以获取元素的宽度和高度,而 clientWidth 和 clientHeight 属性可以获取元素的可见宽度和高度。...

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

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

    JS中位置与大小的获取方法

    首先,我们来了解几个重要的DOM属性,它们分别是:scrollHeight、clientHeight、offsetHeight、scrollWidth、clientWidth和offsetWidth。这些属性帮助我们获取元素内容的高度和宽度,以及元素自身整体的高度和宽度。...

    Javascript元素位置、大小、鼠标定位操作

    3. clientWidth 和 clientHeight:获取元素的宽度和高度,excluding 边框、padding、margin 等。 4. scrollTop 和 scrollLeft:获取元素的滚动条位置。 三、Style 对象 Style 对象提供了多个属性来获取元素的样式...

    JS里各种宽度和高度的句柄

    1. `offsetWidth` 和 `offsetHeight`:这两个属性返回元素的整体宽度和高度,包括内边距(padding)和边框(border)。它们包含了元素自身的宽度和高度,加上左右边框和上下内边距。 2. `clientWidth` 和 `...

Global site tag (gtag.js) - Google Analytics