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

最新推荐文章于 2024-08-17 10:56:45 发布
原创 最新推荐文章于 2024-08-17 10:56:45 发布 · 231 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#offsetwidth #offsetleft #offsetWidth\offsetleft

本文详细解析了JS中的offsetWidth、offsetLeft等属性的含义，以及如何获取网页可见区域、滚动高度等关键信息。同时，文章还对比了不同浏览器下计算方式的差异，并提供了通用方法来获取客户端高度。

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

关于页面元素的宽高属性的三大家族(offset、scroll、client)
weixin_40630195的博客
12-25 830
三大家族(offset、scroll、client),获取网页滚动距离,轮播图
原生js—offsetWidth、screenWidth、clientWidth、innerWidth、outerWidth……各种宽高的理解
代码小宝宝的博客
02-23 4234
** 对js里面的各种宽、高的理解 ** 1.首先对 window对象 、 document对象 做一个区别; window ：窗口（整个浏览器窗口），包含document; document ：整个HTML文档； 2.与 window 相关的宽、高： window.innerWidth：整个浏览器窗口的宽度； window.innerHeight：整个HTML文档的高度（body的高度） ...
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之全然具体解释
weixin_34378767的博客
10-10 155
  HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth究竟指的哪到哪的距离之全然具体解释scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗体中眼下可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗体中可见内容的最顶端之间的距离scrollWidth:获取对象的滚...
html元素的 height、clientHeight和offsetHeight之间的区别
weixin_30367945的博客
06-18 307
height：指元素内容的高度，jQuery中的height()方法返回的就是这个高度。 clientHeight：内容高度+padding高度，jQuery中的innerHeight()方法返回的就是这个高度。 offsetHeight：内容高度+padding高度+边框宽度，jQuery中的outerHeight()方法返回的就是这个高度。 width：指元...
html offsetwidth 字符串宽度,scrollWidth、clientWidth、offsetWidth、width的区别
weixin_36158843的博客
06-17 555
scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。innerWidth：window.innerHeight=浏览器窗口的内部高度window.innerWidth=浏览...
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解(转载)
weixin_30813225的博客
02-23 115
作者： 来源: http://bbs.chinaunix.net 核心提示：HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTo...
html offsetwidth 字符串宽度,js中，如何计算一个字符串宽度
weixin_39613540的博客
06-17 186
http://bbs.youkuaiyun.com/topics/300032210function textSize(fontSize, text) {var span = document.createElement("span");var result = {};result.width = span.offsetWidth;result.height = span.offsetWidth;span.s...
三剑客：offset、client和scroll还傻傻分不清？
01-18
在学习前端的过程中，我们经常会碰到offset, client与scroll，所以我就把它们称作为‘三剑客’。 01 offset – 偏移量 定义：元素在屏幕上占用的所有的可见的空间。 元素可见的大小由其高度、宽度决定，包括所有内...
javascript获取隐藏dom的宽高 具体实现
10-27
'WidthHeight'.replace(/[^]+/g,function(i){ var a = i.toLowerCase(); wh[a] = elem['offset'+i] || elem['client'+i]; }); return wh; }; if(getCss(dom,'display') === 'none'){ var nDom = dom....
元素偏移（offset，scroll,client)介绍，动态设置类名，样式
qq_48763502的博客
08-17 2691
属性 / 方法描述表示一个元素的顶部边框的宽度，以像素表示。表示一个元素的左边框的宽度，以像素表示。在页面上返回内容的可视高度（高度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）在页面上返回内容的可视宽度（宽度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）返回任何一个元素的高度包括边框（border）和内边距（padding），但不包含外边距（margin）
详解HTML元素的height、offsetHeight、clientHeight、scrollTop等梳理
01-18
关于元素的一些属性 在前端的日常开发中，我们经常无可避免的需要获取或者监听一些页面的属性，那么我们需要经常了解一些属性代表的含义才能更好地使用这些属性。特别是一下这些： 尺寸相关：offsetHeight、clientHeight、scrollHeight； 偏移相关：offsetTop、clientTop、scrollTop、pageYOffset、scrollY； 获取相对视口位置：Element.getBoundingClientRect()； 获取元素的style对象：Window.getComputedStyle(Element)； 属性的定义 关于尺
网页元素位置(scroll、client、offsetWidth等)获取、设置详解
09-01
网页元素位置(scroll、client、offsetWidth等)获取、设置详解
对html标签的offsetWidth、clientWidth、scrollWidth属性的理解
guohao326的博客
06-01 2981
如果是用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 330
感谢原文作者：幽幽冷瞳 原文链接：https://www.cnblogs.com/ifworld/p/7605954.html offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距） offsetHeight //返回元素的高度（包括元素高度、内边距和边框，不包括外边距） clientWidth //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距） clientHeight //返回元素的高度（包括元素高度、内边距.
offset width,height,left ,top 详解
iteye_11502的博客
09-28 391
假设 obj 为某个 HTML 控件。 obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。 obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。 obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。 obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。 如下是html &lt;!...
[原创]scroll,client,offset 的宽度和高度
04-07 205
<!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 1126
offsetWidth与offsetLeft
willard_cui的博客
08-16 7万+
1、offsetWidth: 为元素的width+元素的padding+边框的宽度 如图： 2、offsetLeft、offsetTop、offsetRight、offsetBottom 以offsetLeft为例进行说明，在不同的浏览器中其值不同，且与父元素的position属性（relative,absolute,fixed）有关。现分以下几种情况说明：（测试所用的浏览...
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
热门推荐
Dancy的博客......
07-26 8万+
关于js中的offsetWidth、clientWidth、scrollWidth等一系列属性及其方法一直都傻傻分不清，这里就来总结一下这些方法的用法和含义。 注意： 下面元素属性和元素方法都通过 elem.属性 或 elem.方法 的方式使用，window属性通过 window.属性 的方式使用，document属性则通过document调用。 &amp;amp;lt;script&amp;amp;gt; /* ...
width和height无法使用
最新发布
11-27
当`width`和`height`属性在某些情况下无法使用时，这可能有以下几个原因： 1. **DOM元素未加载完成**：如果你尝试获取元素尺寸之前，页面上的元素还没有完全加载，`clientWidth`和`clientHeight`可能会为0。确保在操作这些属性之前，先检查元素是否已经存在并已加载。 ```javascript window.addEventListener('DOMContentLoaded', function() { const element = document.getElementById('yourElement'); if (element) { console.log(element.offsetWidth, element.offsetHeight); } else { console.log('Element not loaded yet.'); } }); ``` 2. **CSS影响**：如果元素的宽度或高度被CSS样式（如`display: none;`, `visibility: hidden;`）或定位设置（如`position: absolute;`）影响，它们的实际大小可能不会反映在`width`和`height`上。你需要考虑这部分计算。 3. **跨浏览器兼容性**：不同浏览器对于元素尺寸的处理可能存在细微差异。确保你了解浏览器的特性和可能的兼容问题，特别是针对IE等较旧版本。 4. **`offset*` vs `client*`**：`offsetWidth`和`offsetHeight`是包括边距和滚动条在内的总尺寸，而`clientWidth`和`clientHeight`不包括边距。确认你正确地选择了要获取哪一种类型的数据。 5. **元素不存在或错误的选择器**：检查你的元素选择器是否准确无误，如果没有找到对应的元素，这些属性自然是无法访问的。 6. **权限限制**：有时出于安全策略，脚本可能没有足够的权限读取用户的屏幕尺寸信息。 排查问题后，根据具体情况调整你的代码，比如添加适当的延迟执行、处理异常或使用其他合适的测量方法。如果你能提供具体的代码片段或上下文，我可以更具体地帮助你。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值