clientWidth 和 offsetWidth 的区别 - 闲谈 - ITeye博客

`

shuaigg.babysky

浏览: 567820 次
性别:
来自: 济南

最近访客更多访客>>

sgqt

amu123456

ringphone

u012363178

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

mr_xiaoyu：最终会调用到ScheduledFutureTask#run() ...
ScheduledThreadPoolExecutor
csmnjk：谢谢分享！
SSH + Lucene + 分页 + 排序 + 高亮模拟简单新闻网站搜索引擎
qsword555： public static void main(String ...
ScheduledThreadPoolExecutor
yun900800：我的也是就抛了一次异常
ScheduledThreadPoolExecutor
bjfuzh： bjfuzh 写道我自己跑了下，那个抛异常的定时器，只执行了一 ...
ScheduledThreadPoolExecutor

clientWidth 和 offsetWidth 的区别

博客分类：

javascript

阅读更多

clientWidth 指的是实际内容宽度 + padding

offsetWidth 指的是实际内容宽度 + padding + border

还有一个区别

如果是ie的话，没有给元素设置高度时，取得clientWidth和clientHeight将为0。

如果不是ie的话，则都能返回正确的值。

offsetWidth则没有这些毛病，都能够正确的返回值

使用标准头的时候，css width定义的就是内容宽度

不适用标准头的时候，css width定义的是padding + border + 内容宽度

分享到：

position : fixed | z-index

2010-11-10 15:40
浏览 1185
评论(0)
分类:Web前端
查看更多

评论

发表评论

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

相关推荐

scrollWidth,clientWidth,offsetWidth的区别: 在网页开发中，理解和掌握DOM元素的尺寸属性是至关重要的，特别是`scrollWidth`、`clientWidth`和`offsetWidth`。这三个属性都是用来获取HTML元素宽度的，但它们各自的含义和应用场景有所不同。首先，`scrollWidth...

scrollWidth,clientWidth与offsetWidth的区别: clientWidth 和 offsetWidth 的区别接下来的 HTML 代码段展示了 **clientWidth** 和 **offsetWidth** 的差异： ```html <title>77.htm文件 ('offsetWidth:' + this.offsetWidth + '\nclientWidth:' + this...

scrollwidth和offsetwidth区别: 在最后，我们可以总结出 ScrollWidth 和 OffsetWidth 之间的关键区别：ScrollWidth 会将滚动条的宽度包括在内，而 OffsetWidth 则会将边框的宽度包括在内。我们需要根据实际情况选择合适的属性来获取 HTML 元素的...

JavaScript属性scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解: 在JavaScript中，理解和掌握`scrollLeft`、`scrollWidth`、`clientWidth`以及`offsetWidth`这四个属性对于创建动态且响应式的网页至关重要。这些属性都与元素的尺寸和定位有关，尤其在处理滚动条和元素可视区域时...

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

javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解: 通过对比`scrollLeft`、`scrollWidth`、`clientWidth`和`offsetWidth`，我们可以观察到它们在不同浏览器中（如IE和Firefox）表现出来的差异，尤其注意在旧版IE浏览器（如IE 5.0/5.5）和较新版本（如IE 6.0和Firefox ...

this.clientWidth和this.offsetWidth两个有什么不同: 总结一下，"offsetWidth" 和 "clientWidth" 的主要区别在于它们是否包括元素的边框宽度。"offsetWidth" 包括元素的边框宽度，而 "clientWidth" 不包括。这使得 "offsetWidth" 在需要考虑元素边框的情况下更为适用，...

offsetWidth、clientWidth、scrollWidth、scrollTop、scrollLeft等属性图示: 在Web开发中，理解和掌握DOM元素的尺寸与位置属性至关重要，特别是`offsetWidth`、`clientWidth`、`scrollWidth`、`scrollTop`和`scrollLeft`这些属性。它们提供了关于元素几何特性的详细信息，有助于实现精确的布局...

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

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

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

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

JS获取各种宽度、高度的简单介绍: offsetWidth和offsetHeight与元素的style.width和style.height属性有明显的区别，比如offsetTop返回的是数字值，而***返回的是带有单位的字符串（例如"30px"），offsetTop属性是只读的，而***属性是可读写的。...

JS获取浏览器的高度和宽度: 在定位元素时，还可以使用`scrollLeft`、`scrollWidth`、`clientWidth`、`offsetWidth`等属性，以及`event`对象的相关属性，如`clientX`、`clientY`、`offsetX`、`offsetY`等，帮助我们精确地计算元素的位置和相对...

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

html学习参考文档: 1. `scrollWidth`、`clientWidth`和`offsetWidth` - `scrollWidth`表示元素的实际内容宽度，不包括边框，但会随着内容的增加而改变。如果元素内容超出了可视区域，导致出现滚动条，`scrollWidth`就会大于`...

javascript获取设置div的高度和宽度兼容任何浏览器.docx: 除了使用 `offsetHeight` 和 `offsetWidth` 之外，还有其他几种方法可以获取和设置元素的高度和宽度： 1. **`clientHeight` 和 `clientWidth`：** - **定义**：这些属性返回元素的内部高度和宽度（不包括边框和...

Global site tag (gtag.js) - Google Analytics