html 中各种宽高的理解 client offset width height

最新推荐文章于 2021-06-17 21:37:51 发布
最新推荐文章于 2021-06-17 21:37:51 发布
阅读量166 收藏
点赞数
分类专栏： web 前端处理 文章标签： offsetwidth offsetleft offsetWidth\offsetleft
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangzhantao/article/details/84254705
版权

JS：offsetWidth\offsetleft 等图文解释   (2010-11-01 10:50:41)转载▼

标签： it分类： 工作日志

 

图片见附件.

 

document.documentElement.clientHeight 与 document.body.clientHeight  区别  

当html有<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

得到客户端高度方法为：document.documentElement.clientHeight  否则用 document.body.clientHeight 

通用方法：var height = document.documentElement.clientHeight ||  document.body.clientHeight  

 

 

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

 

 

 

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

　　以上主要指IE之中，FireFox差异如下：

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

 

HTML控件offsetTop、scrollTop等属性

假设 obj 为某个 HTML 控件。

 

obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。

 

obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。

 

obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。

 

obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。

 

转载：http://blog.sina.com.cn/s/blog_63426ff90100m8c3.html

wangzhantao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解HTML元素的height、offsetHeight、clientHeight、scrollTop等梳理
01-18
关于元素的一些属性 在前端的日常开发中，我们经常无可避免的需要获取或者监听一些页面的属性，那么我们需要经常了解一些属性代表的含义才能更好地使用这些属性。特别是一下这些： 尺寸相关：offsetHeight、clientHeight、scrollHeight； 偏移相关：offsetTop、clientTop、scrollTop、pageYOffset、scrollY； 获取相对视口位置：Element.getBoundingClientRect()； 获取元素的style对象：Window.getComputedStyle(Element)； 属性的定义 关于尺
三剑客：offset、client和scroll还傻傻分不清？
01-18
在学习前端的过程中，我们经常会碰到offset, client与scroll，所以我就把它们称作为‘三剑客’。 01 offset – 偏移量 定义：元素在屏幕上占用的所有的可见的空间。 元素可见的大小由其高度、宽度决定，包括所有内...
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之全然具体解释
weixin_34378767的博客
10-10 101
  HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth究竟指的哪到哪的距离之全然具体解释scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗体中眼下可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗体中可见内容的最顶端之间的距离scrollWidth:获取对象的滚...
html元素的 height、clientHeight和offsetHeight之间的区别
weixin_30367945的博客
06-18 245
height：指元素内容的高度，jQuery中的height()方法返回的就是这个高度。 clientHeight：内容高度+padding高度，jQuery中的innerHeight()方法返回的就是这个高度。 offsetHeight：内容高度+padding高度+边框宽度，jQuery中的outerHeight()方法返回的就是这个高度。 width：指元...
html offsetwidth 字符串宽度,scrollWidth、clientWidth、offsetWidth、width的区别
weixin_36158843的博客
06-17 448
scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。innerWidth：window.innerHeight=浏览器窗口的内部高度window.innerWidth=浏览...
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解(转载)
weixin_30813225的博客
02-23 71
作者： 来源: http://bbs.chinaunix.net 核心提示：HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTo...
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
11-20
在JavaScript中，DOM元素的尺寸和位置是通过一系列属性来获取的，如offsetWidth、clientWidth、innerWidth等。这些属性对于布局计算和动态界面设计至关重要。以下是对这些属性和方法的详细解释： 1. **clientWidth...
Android基于google Zxing实现二维码的生成
09-02
int offset = y * widthAndHeight; for (int x = 0; x < widthAndHeight; x++) { pixels[offset + x] = bitMatrix.get(x, y) ? Color.BLACK : Color.WHITE; } } Bitmap bitmap = Bitmap.createBitmap(width...
移动端 日期，树...等控件的js插件
06-16
Math.max(c['scroll' + b], c['offset' + b], h['client' + b], h['scroll' + b], h['offset' + b]) : (t = this.offset()) && t[k] : this.each(function () { a(this).css(k, n) }) } }); [ 'width', '...
获取dom元素那些讨厌的位置封装代码
09-05
- `client()`: 返回元素的原始尺寸，不包括边框和滚动条，提供`width`和`height`两个属性。 - `screen()`: 提供当前屏幕的可用高度和宽度，通常用于调整全屏或适应屏幕尺寸的设计。 - `mouse(event)`: 根据鼠标...
网页元素位置(scroll、client、offsetWidth等)获取、设置详解
09-01
网页元素位置(scroll、client、offsetWidth等)获取、设置详解
html offsetwidth 字符串宽度,js中，如何计算一个字符串宽度
weixin_39613540的博客
06-17 120
http://bbs.csdn.net/topics/300032210function textSize(fontSize, text) {var span = document.createElement("span");var result = {};result.width = span.offsetWidth;result.height = span.offsetWidth;span.s...
对html标签的offsetWidth、clientWidth、scrollWidth属性的理解
guohao326的博客
06-01 2911
如果是用jquery 操作 请用 $(".box")[0].clientHeight; 或$("#box")[0].offsetWidth            $(".box") 是选中 class 为box  的jquery对象    $(".box")[0] 是选中 class 为box 的dom对象         offsetWidth：元素内可见区域的宽度 + 元素边框宽度（如果有滚动...
JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍
Jason的学习笔记
05-22 244
感谢原文作者：幽幽冷瞳 原文链接：https://www.cnblogs.com/ifworld/p/7605954.html offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距） offsetHeight //返回元素的高度（包括元素高度、内边距和边框，不包括外边距） clientWidth //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距） clientHeight //返回元素的高度（包括元素高度、内边距.
offset width,height,left ,top 详解
iteye_11502的博客
09-28 314
假设 obj 为某个 HTML 控件。 obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。 obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。 obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。 obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。 如下是html &lt;!...
[原创]scroll,client,offset 的宽度和高度
04-07 159
<!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"> <head...
offsetWidth 和 width
蚁族的奋斗的博客
08-09 1051
offset、client、scroll：width、height、left、top
大G的博客
11-20 221
offsetWidth 返回一个元素的布局宽度。offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。 clientWidth 表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。 scrollWidth 元素的s
请讲一讲JavaScript中offset，scroll，client，三者的作业与区别
最新发布
03-27
在JavaScript中，offset、scroll和client都是针对元素位置和大小的属性。 1. offset offset指的是一个元素相对于其定位父元素的位置。offset包含了元素的位置（left和top）和大小（width和height），以像素为单位。offset属性是只读的。 例如，假设有一个元素div，它的位置是相对于其父元素的，那么可以通过以下方式获取它的offset属性： ``` var div = document.getElementById("myDiv"); var offsetLeft = div.offsetLeft; var offsetTop = div.offsetTop; var offsetWidth = div.offsetWidth; var offsetHeight = div.offsetHeight; ``` 2. scroll scroll指的是一个元素的滚动位置。scroll包含了元素在水平和垂直方向上的滚动位置（scrollLeft和scrollTop），以像素为单位。scroll属性是可读写的。 例如，假设有一个元素div，它有滚动条，那么可以通过以下方式获取它的scroll属性： ``` var div = document.getElementById("myDiv"); var scrollLeft = div.scrollLeft; var scrollTop = div.scrollTop; ``` 3. client client指的是一个元素的可见区域大小。client包含了元素在水平和垂直方向上的可见区域大小（clientWidth和clientHeight），以像素为单位。client属性是只读的。 例如，假设有一个元素div，它有一些内容，但是只有一部分是可见的，那么可以通过以下方式获取它的client属性： ``` var div = document.getElementById("myDiv"); var clientWidth = div.clientWidth; var clientHeight = div.clientHeight; ``` 区别： 1. offset包含了元素的位置和大小，而client只包含了元素的可见区域大小。 2. scroll和client都只包含了元素在水平和垂直方向上的属性，而offset包含了元素相对于其定位父元素的属性。 3. offset和client是只读的，而scroll是可读写的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值