offset/client/scroll相关属性

最新推荐文章于 2023-09-18 20:20:31 发布
最新推荐文章于 2023-09-18 20:20:31 发布
阅读量165 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zhang190716/article/details/103235212
版权

offset

offset 中文翻译为偏移量

offsetLeft/offsetTop

offsetParent 获取距离当前元素最近的 定位父元素（relative ，absolute，fixed），没有定位父元素则为body

offsetLeft/offsetTop 获取偏移量， 偏移量参考的是offsetParent

offsetWidth/offsetHeight

offsetWidth/offsetHeight 获取大小，包含了width/height，padding ，border；

在这里插入图片描述

client

clientLeft/clientTop

clientLeft/clientTop 不是坐标，而是对象的border-left/border-topd的宽度

clientWidth/clientHeight

clientWidth/clientHeight 获取大小，包括 width/height，padding ；

scroll

offset 中文翻译为滚动

scrollLeft/scrollTop

scrollLeft/scrollTop 获取滚动到外部的距离，从出padding开始计算

scrollWidth/scrollHeight

scrollWidth/scrollHeight 获取内容的大小，包含padding和未显示的内容；不包含滚动条

Zhang190716
关注
专栏目录
js运动-offsetWidth和offsetHeight引发的血案
每天进步一点点
05-16 8856
之前说的js运动不管是单物体运动，多物体运动，还是缓冲运动。在获取元素自身宽，高的时候用的都是offsetWidth，offsetHeight，但是这会引发一些麻烦！！因为在js中offsetWidth，offsetHeight获取的不仅仅是元素样式中定义的width，height还包括给元素设置的border和padding的值 看看下面的测试例子： #div1{
前端-JS进阶-offset/client/scroll
IU_aena的博客
09-09 552
前端-JS进阶-offset/client/scroll
对于offsetWidth,offsetHeight,offsetLeft,offsetTop的理解
qq_41445106的博客
07-16 2433
如何理解区分offsetWidth,offsetHeight,offsetLeft,offsetTop 在刚开始使用的时候总是不能理解这四个有什么不一样，用在哪里，因为这几个词真的太像了，emmm，总结了一番，谈谈我的理解 这里首先说一下offsetWidth和offsetHeight offsetWidth：指的是自身的宽 offsetheight：指的是自身的高 附上代码理解： <!DO...
offsetWidth / offsetHeight等
qq_46199553的博客
11-01 692
offsetWidth / offsetHeight
offsetWidth/offsetHeight，clientWidth/clientHeight与scrollWidth/scrollHeight的区别？
最新发布
m0_71955188的博客
09-18 253
offsetWidth和offsetHeight： offsetWidth获取元素的宽度，包括元素的边框、内边距和垂直滚动条（如果存在）的宽度。 offsetHeight：获取元素的高度，包括元素的变宽、内边距和水平滚动条（如果存在）的高度。 clientWidth和clientHeight： clientWidth获取元素的可视区域宽度，不包括边框和滚动条的宽度。他表示元素内部可以显示内容的宽度。 clientHeight 获取元素的可视区域高度，不包括边框和滚动条的高度。他表示元素内部可以显示内容的高度
offsetWidth 和 offsetHeight
weixin_30616969的博客
07-06 270
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; ...
javascript中offset、client、scroll的属性总结
12-12
JavaScript中的offset、client和scroll属性是用于获取和操作HTML元素...在JavaScript中处理元素尺寸和位置时，了解并正确使用offset、client和scroll属性至关重要，它们可以帮助我们创建更加动态和响应式的网页界面。
js中offset,client , scroll 三大元素知识点总结
10-16
本篇将详细介绍与元素尺寸位置和滚动相关的三个重要的属性家族：offset系列、client系列和scroll系列。这些属性为我们提供了元素位置信息，窗口或元素内部的滚动距离等重要数据，对于实现页面布局和交互功能至关重要...
三剑客：offset、client和scroll还傻傻分不清？
01-18
在学习前端的过程中，我们经常会碰到offset, client与scroll，所以我就把它们称作为‘三剑客’。 01 offset – 偏移量 定义：元素在屏幕上占用的所有的可见的空间。 元素可见的大小由其高度、宽度决定，包括所有内...
css基础---使用offsetWidth和offsetHeight获取元素的尺寸
wenmin1987的博客
06-08 4928
获取元素的尺寸（display显示情况 和display：none两种情况 来获取） offsetWidth表示元素在页面中所占用的总宽度 offsetHeight表示元素在页面中所占用的总高度 <div style="width:200px;height:50%;"> <div style="width:50%height:50%;;"> ...
js获取Html元素的实际宽度高度
weixin_30438813的博客
05-07 396
情况一：宽高都写在样式表里，即外部样式或嵌入式样式，比如#div1{width:120px;}。这种情况通过#div1.style.width拿不到宽度，而通过#div1.offsetWidth才可以获取到宽度。情况二：宽和高是写在行内中，即内联式样式，比如style="width:120px;"，这中情况通过上述2个方法都能拿到宽度。因为id.offsetWidth和id.offsetHeigh...
JS中offsetWidth和width的区别
前端挖掘机
06-11 2160
1.对象.offsetWidth属性可以返回对象的padding+border+contentwidth属性值之和，而tyle.width返回值仅是是我们定义的width属性值。2.offsetWidth属性仅是可读属性，而style.width是可读写的。3.offsetWidth属性返回值是整数，而style.width的返回值是字符串，并且带有单位。4.style.width仅能返回以sty...
offsetwidth/offsetheight的区别
LHJBK的博客
08-03 795
1. 2. 小小总结一小下" alt="clientWidth/scrollWidth/offsetWidth 小小总结一小下" src="http://s12.sinaimg.cn/bmiddle/61352f21g70edab9ef07b&690" style="margin:0px; padding:0px; border:0px; list-style:none">
详解javascript中offsetTop/Left、offsetWidth/Height、clientWidth/clientHeight
东语的专栏
08-30 828
javascript中获取元素的尺寸位置等，有好多个属性（clientWidth,clientHeight,offsetWidth,offsetHeight,scrollWidth,scrollHeight）等，本文主要介绍各自属性的意义。
JavaScript的中offsetWidth，的offsetHeight
limlimlim的专栏
01-28 1661
JavaScript的中offsetWidth是什么意思？ 最佳答案：是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变 scrollWidth，clientWidth与offsetWidth的区别 scrollWidth是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）。clientWidth是对象可见的宽度，不包滚动条等边线
关于offsetTop与offsetHeight的区别以及使用方法
soos的博客
07-10 6422
offsetTop和offsetHeight是设置一个元素的位置和获取圆度大小经常会使用的参数，下面具体讲一下他们的区别于联系： 例如obj为html的一个元素对象， obj.offsetTop指的是obj距离上方或者父级元素（position非static）的位置，整型，单位像素。 obj.offsetHeight指obj自身的高度，整型，单位像素。 另外，还有scrollHeight与
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
热门推荐
qq_35430000的博客
05-11 16万+
转载自：https://www.imooc.com/article/17571网页可见区域高：document.body.clientHeight网页正文全文高：document.body.scrollHeight网页可见区域高（包括边线的高）：document.body.offsetHeight网页被卷去的高：document.body.scrollTop屏幕分辨率高：window.screen...
前端三剑客：理解offset、client与scroll的区别与用法
在前端开发中，"三剑客"——offset、client和scroll是三个经常被开发者混淆的概念，用于理解和操作网页元素在页面中的位置和尺寸。这些概念主要涉及元素在浏览器视口中的布局和滚动行为。 1. **offset**: - 偏移量...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值