`
ocean
  • 浏览: 49047 次
  • 来自: ...
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较

JavaScriptCSSXHTMLGmailHTML 
阅读更多

转摘

IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

具体效果请参见下面的代码：

js 代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">   
  2. <html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]" lang="gb2312">   
  3. <head>   
  4. <head>   
  5. <title> 代码实例：关于clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较 </title>   
  6. <meta http-equiv="content-type" content="text/html; charset=gb2312" />   
  7. <meta name="author" content="枫岩,CnLei.y.l@gmail.com">   
  8. <meta name="copyright" content="[url=http://www.cnlei.com]http://www.cnlei.com[/url]" />   
  9. <meta name="description" content="关于clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较" />   
  10. <style type="text/css" media="all">   
  11. body {font-size:14px;}   
  12. a,a:visited {color:#00f;}  
  13. #Div_CnLei {   
  14. width:300px;   
  15. height:200px;   
  16. padding:10px;   
  17. border:10px solid #ccc;   
  18. background:#eee;   
  19. font-size:12px;   
  20. }  
  21. #Div_CnLei p {margin:0;padding:10px;background:#fff;}   
  22. </style>   
  23. <script type="text/javascript">   
  24. function Obj(s){   
  25. return document.getElementById(s)?document.getElementById(s):s;   
  26. }   
  27. function GetClientWidth(o){   
  28. return Obj(o).clientWidth;   
  29. }   
  30. function GetClientHeight(o){   
  31. return Obj(o).clientHeight;   
  32. }   
  33. function GetOffsetWidth(o){   
  34. return Obj(o).offsetWidth;   
  35. }   
  36. function GetOffsetHeight(o){   
  37. return Obj(o).offsetHeight;   
  38. }   
  39. </script>   
  40. </head>   
  41. <body>   
  42. <p>点击下面的链接:</p>   
  43. <div id="Div_CnLei">   
  44. <p><a href="javascript:alert(GetClientWidth('Div_CnLei'));">GetClientWidth();</a>  <a href="javascript:alert(GetClientHeight('Div_CnLei'));">GetClientHeight();</a></p>   
  45. <p><a href="javascript:alert(GetOffsetWidth('Div_CnLei'));">GetOffsetWidth();</a>  <a href="javascript:alert(GetOffsetHeight('Div_CnLei'));">GetOffsetHeight();</a></p>   
  46. </div>   
  47. <div id="Description">   
  48. <p><strong>IE6.0、FF1.06+：</strong><br />   
  49. clientWidth = width + padding = 300+10×2 = 320<br />   
  50. clientHeight = height + padding = 200+10×2 = 220<br />   
  51. offsetWidth = width + padding + border = 300+10×2+10×2= 340<br />   
  52. offsetHeight = height + padding + border = 200+10×2+10×2 = 240</p>   
  53. <p><strong>IE5.0/5.5：</strong><br />   
  54. clientWidth = width - border = 300-10×2 = 280<br />   
  55. clientHeight = height - border = 200-10×2 = 180<br />   
  56. offsetWidth = width = 300<br />   
  57. offsetHeight = height = 200</p>   
  58. </div>   
  59. </body>   
  60. </html>  
分享到：
| DOM精简教程
评论
1 楼 dohkoos 2007-03-24  
这些属性的值和DOCTYPE也有关系, 当DOCTYP为strict时FF2.3中offHeight为0
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    clientHeight offsetHeight scrollHeight clientWidth详解

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

    分析clientHeight、offsetHeight、scrollHeight

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

    clientHeight

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

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

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

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

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

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

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

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

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

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

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

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

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

    JS获取IMG图片高宽的简单实例

    前段时间在LJW写的touchslider.js轮播代码里添加自适应屏幕大小的功能时，遇到一个问题。...obj.offsetWidth(offsetHeight); obj.clientWidth(clientHeight); getComputedStyle 与 currentStyle; obj.naturalWidth(nat

    javascript弹弹球

    很详细的解说了弹弹球的原理，我给的注释很多很详细，便于大家理解。 代码内的注释详细解说了距离...可以很清晰得看到offsetWidth,offsetHeight,document.body.clientWidth,document.clientHeight 这4个属性的用法。

    HTML在IE浏览器和FF浏览器中标签的使用

    3. **窗体尺寸**：IE通过document.body.offsetWidth和offsetHeight获取尺寸，FF则使用window.innerWidth和innerHeight以及document.documentElement.clientWidth和clientHeight。推荐使用document.body.clientWidth...

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

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

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

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

    jquery BS,dialog控件自适应大小

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

    js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    如IE6.0和FF1.06+版本的浏览器，clientWidth和clientHeight属性的值会包含内边距（padding），而offsetWidth和offsetHeight属性的值还会包含边框（border）。但是，IE5.0/5.5版本的浏览器计算clientWidth和...

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

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

    doctype后如何获得body.clientHeight的方法

    在ie6中很多js脚本执行就会出现问题，一般是在获取clientWidth, clientHeight,offsetWidth, offsetHeight,scrollWidth, scrollHeight,scrollTop, scrollLeft会返回不正确的值。 因为在加了doctype后，在ie6中...

Magicbox
Global site tag (gtag.js) - Google Analytics