网页元素位置(scroll、client、offsetWidth等)获取、设置详解

最新推荐文章于 2020-07-08 10:51:42 发布
最新推荐文章于 2020-07-08 10:51:42 发布
阅读量1.6k 收藏
点赞数
分类专栏： 辅助信息 文章标签： scroll object

 

说明
scrollHeight: 获取对象的滚动高度，也就是如果不带滚条动时，完全伸展时的高度。
scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth: 获取对象的滚动宽度，也就是如果不带滚条动时，完全伸展时的宽度。
offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop: 获取对象相对于版面或由   offsetParent 属性指定的父坐标的计算顶端位置
offsetWidth: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度
---------------------------------------------------------
具体请看示例 : ( 可以改变文本框的行数或拉到滚动条看数值变化 ) ：
---------------------------------------------------------

txtEaseWe.offsetHeight=100
txtEaseWe.clientHeight=81
txtEaseWe.scrollHeight=446

txtEaseWe.offsetLeft=230
txtEaseWe.clientLeft=1
txtEaseWe.scrollLeft=0

txtEaseWe.offsetTop=856
txtEaseWe.clientTop=1
txtEaseWe.scrollTop=365

txtEaseWe.offsetWidth=300
txtEaseWe.clientWidth=281
txtEaseWe.scrollWidth=281

txtEaseWe.offsetParent=[object]
 
lincnl
关注
专栏目录
offsetwidth详解_offsetWidth和它的兄弟姐妹们
weixin_39905500的博客
12-01 2万+
我们在取元素的宽度时脑海里就能想起如offsetWidth、 clientWidth、 scrollWidth 、style.width，那它们有什么区别呢？先看一下官方定义：一、HTMLElement.offsetWidth是一个只读属性，返回一个元素的布局宽度。一个典型的（译者注：各浏览器的offsetWidth可能有所不同）offsetWidth是测量包含元素的边框(border)、水平线上...
空间坐标详解
langmanboy的博客
04-14 1089
空间坐标 1. 视口与文档尺寸 1-1 浏览器可视区域 网页很多都是多屏（通过滚动条显示看不见的内容），所以文档尺寸一般大于视口尺寸 视口尺寸不包括浏览器工具条、菜单、标签、状态栏等 当你打开控制台后，视口尺寸就相应变小了 position 使用文档定位，fixed 使用视口定位 文档坐标在页面滚动时不发生改变，视口坐标的操作需要考虑滚动条的位置 1-2 浏览器视口尺寸 获取文档（document）可视区域不包括滚动部分在内的宽度和高度 document.documentElement.client
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
小范的技术空间
11-21 552
 HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的
JS-DOM属性 offset、client、scroll获取页面元素位置
U R My Sunshine
07-08 393
吹空调着凉了，擤鼻涕擤得鼻子痛TT，脑子混沌。TS10坑没填完，最近笔记本给KW用了，台式无法连蓝牙耳机，先看点别的。 场景：页面点击某Title跳转到页面下边对应位置。类似于HTML中的锚点。跟这个博文目录也类似。 参考文章： https://javascript.ruanyifeng.com/http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_us...
offsetWidth等等的介绍
想飞的猪的博客
11-23 1061
最近弄了一个放大镜的案例，所以在这里写了一下关于dom中offsetWidth等相关属性 给个图，大家体验下 有兴趣的可以自己去试下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport&qu
javascript的offset、client、scroll使用方法详解
12-12
JavaScript中的`offset`、`client`和`scroll`是一组用于获取和操作页面元素位置及大小的重要属性。这些属性在Web开发中非常常见，尤其是在处理动态布局和交互时。下面将详细讲解这些属性的含义、用途及其在不同...
详解js几个绕不开的事件兼容写法
10-19
var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth; var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight; var scroll_Top = document....
offsetWidth&offsetLeft详解
LynnWonder
08-30 2302
今天手写方格移动的时候遇到了一点问题，主要是针对el.style.left和el.offsetLeft无法区分，其实这个问题一直以来没有具体总结过，只在我的学习笔记(7)里面进行过一次不完全的概述，这次rearrange一下 offsetWidth&offsetLeft详解 文章目录offsetWidth&offsetLeft详解快捷位置和尺寸offsetWidth，clien...
图解offsetWidth等
caoxinhui521的博客
08-22 513
图片源于：http://blog.csdn.net/lzding/article/details/46371609
offset width,height,left ,top 详解
iteye_11502的博客
09-28 331
假设 obj 为某个 HTML 控件。 obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。 obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。 obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。 obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。 如下是html <!...
DOM 中的 offset 属性
cocytus
09-04 2867
1. DOM 中的 offset 属性 1.1. offsetParent 与当前元素最近的经过定位(position 不等于 static)的父级元素，主要分为下列几种情况： 元素自身有 fixed 定位，offsetParent 的结果为 null 当元素自身有 fixed 固定定位时，我们知道固定定位的元素相对于视口进行定位，此时没有定位父级，offsetParent 的...
javascript 中 offsetWidth,clientWidth;offsetHeight,clientHeight的区别
acugck6042的博客
04-11 255
javascript 中 offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变clientWidth、offsetWidth、clientHeight区别IE6.0、FF1.06+：offsetWidth = width + padding + borderoffsetHeight = height + padding + borderIE5.0/5.5：of...
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解(转)
笑傲江湖的专栏
03-16 1368
scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度offsetLeft:获取对象相对于版面或
JavaScript -- offset、client、scroll 获取元素长度区别
onlyoneLIJINGYI的博客
03-20 441
以一个例子来区别这几个属性的计算方式： 父元素为橘黄色区域，子元素为蓝色边框包裹的区域。 父元素布局： 子元素布局：（content设置width、height都为100px，因为右侧出现滚动条，所以浏览器布局显示content width 90.4为去掉滚动条的宽度。） offset 类 offsetHeight 与 offsetWidth offsetWidth ：获取元素本身的...
对html标签的offsetWidth、clientWidth、scrollWidth属性的理解
guohao326的博客
06-01 2927
如果是用jquery 操作 请用 $(".box")[0].clientHeight; 或$("#box")[0].offsetWidth            $(".box") 是选中 class 为box  的jquery对象    $(".box")[0] 是选中 class 为box 的dom对象         offsetWidth：元素内可见区域的宽度 + 元素边框宽度（如果有滚动...
scrollLeft,scrollWidth,clientWidth,offsetWidth 详解
hxw4656的专栏
03-24 565
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解
前端 潇凡-一个标准前端IT女
07-14 473
scrollHeight: 获取对象的滚动高度。  scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  scrollWidth:获取对象的滚动宽度  offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解(转载)
wwttqq85538649的专栏
12-14 351
<br /> <br />作者： 来源: http://bbs.chinaunix.net核心提示：HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端.....<br />HTML:scrollLeft,scrollWidt
Web前端开发：Client与Scroll应用详解
"Web前端开发技术，特别是关于client和scroll的应用，...理解并熟练运用client和scroll属性，能够帮助开发者创造出更丰富的用户界面，比如动态导航、滚动效果和浮动元素等。这在现代Web开发中是非常基础且重要的技能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值