获取元素位置的三大类型

最新推荐文章于 2022-09-01 15:35:39 发布
最新推荐文章于 2022-09-01 15:35:39 发布
阅读量1.1k 收藏
点赞数
分类专栏： 小知识 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53781355/article/details/122740478
版权

目录

一.offset家族

1.1offsetparent

1.2offsetwidth和offsetheight

 1.3offsetTop和offsetleft

二.client客户端大小

指的是元素内容到内边距占据空间的大小    

  2.1clientwidth

 2.2clientHeight

 2.3clientleft

2.4其他注意事项

三.关于scroll的概念

   

一.offset家族

1.1offsetparent

            表示该元素的父盒子而且必须还有定位

如图所示：求红色盒子的offsetpare

先判断红色盒子是否为fix定位，是fixed定位offsetparent为body

如若不是，看上一级盒子是否有定位，有定位则，上一级盒子为offsetparent

body元素的

1.2offsetwidth和offsetheight

offsetwidth=width+左右边框+左右padding

offsetheight=height+上下边框+上下padding

与style相比

    .box{
        background-color: black;
        width: 100px;
        height: 100px;
        padding: 50px;
        margin: 10px;
    }
</style>
</head>
<body>
    <div class="box">

    </div>
    <script>
        var box=document.querySelector('.box');
        console.log(box.offsetWidth,box.style.width);
    </script>

style只能读取行类设置的属性

   

 1.3offsetTop和offsetleft

    offsetTop当前元素上边款到offsetParent元素上边框的距离

   offsetleft当前元素上边框到offsetParent 元素上边框的距离

二.client客户端大小

指的是元素内容到内边距占据空间的大小    

  2.1clientwidth

clientwidth=width+左右padding

 2.2clientHeight

clientHeight=width+上下padding

 2.3clientleft

左边框大小clienttop上边框大小

2.4其他注意事项

    1.所有的client属性都是只读的和offset属性一样

    2.如果给元素设置display：none则客户端属性client都为0

    3.尽量避免重复访问这些属性

三.关于scroll的概念

1.scrollHeight：表示的总高度，包括由于溢出而无法在网页的不可见部分

2.无滚动条的情况下，scrollheight和clientheight属性结果是相等的

3.scroll是可读写的，并不是可读的

   

王德发lxc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 获取当前div离边框距离_vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法...
weixin_39626369的博客
01-17 5511
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法this.$refs['通过设置ref获取到的dom元素'].getBoundingClientRect();//示例: 获取元素距离顶部的距离this.$refs.journalUpward.getBoundingClientRect().top以上这篇vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法就是小编...
用Javascript获取页面元素的位置
sinoalex
09-07 1141
用Javascript获取页面元素的位置 作者： 阮一峰 日期： 2009年9月14日 制作网页的过程中，你有时候需要知道某个元素在网页上的确切位置。 下面的教程总结了Javascript在网页定位方面的相关知识。 一、网页的大小和浏览器窗口的大小 首先，要明确两个基本概念。 一张网页的全部面积，就是它的大小。通常情况下，网页的大小由内容和CSS样...
获取元素位置的position()与offset()方法区别介绍
12-13
使用jQuery获取元素位置时，我们会使用position()或offset()方法，两个方法都返回一个包含两个属性的对象－左边距和上边距，它们两个的不同点在于位置的相对点不同。 position()获取相对于它最近的具有相对位置(position:relative)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离。 offset()始终返回相对于浏览器文档的距离，它会忽略外层元素。
原生js获取元素的各种位置(大全）
weixin_34270865的博客
08-20 1481
加给元素： offsetLeft （距离定位父级的距离） offsetTop （距离定位父级的距离） offsetWidth （可视宽度） offsetHeight （可视高度） clientLeft （左边框宽度） clientTop （上边框宽度） clientWidth（width + padding） clientHeight（height + padding） scrollTop（纵向...
js中offsetParent详解
hsany330的专栏
10-15 802
1. offsetParent定义：那么offsetParent就是距离该子元素最近的进行过定位的父元素（position：absolute relative fixed），如果其父元素中不存在定位则offsetParent为：body元 素 2. 根据定义分别存在以下几种情况 【1】元素自身有fixed定位，父元素不存在定位，则offsetParent的结果为null（firefox中为：body，其他浏览器返回为null） 【2】元素自身无fixed定位，且父元素也不存在定位，offse...
三天学会HTML5——多媒体元素的使用
02-26
使用Google地图获取位置信息多媒体是互联网中的最重要的一部分，无论访问的是哪种类型的网页，视频或音频触手可及，在之前实现这些功能对开发人员来说可能非常痛苦，必须依赖Object标签，调用第三方软件来加载，如...
python容器类型介绍
06-23
字符串身为容器类型，同样可以使用索引获取指定位置的字符，索引技术从 0 开始，逆序获取时索引从 -1 开始。字符串的格式化可以使用 f-strings，需要在字符串前加上 f 或 F。 切片 切片是指从容器中取出一部分元素...
3.Redis数据类型之List类型
02-14
* List 类型可以使用 linsert 操作在特定位置添加元素。 * List 类型可以使用 lset 操作设置指定下标的元素值。 * List 类型可以使用 lrem 操作删除指定元素。 * List 类型可以使用 ltrim 操作保留指定范围内的数据...
Python教程-字符串详解及序列类型.pdf
03-13
 index(str [,start, end]) 获取指定字符在字符串中出现的位置  t.join(s)：使用字符串 t 来拆分字符串 s，或者将一个列表 s 中的字符串元素按照使用 t 连接  replace(old, new)：将指定字符串中的 old 字符，...
网页制作第十三章插入媒体对象.pptx
10-07
从素材库导入是另一个 方便的途径，用户可以购买相关的素材库来获取媒体资源。自己制作则需要用户拥有美术、编程基础，使用相关的制作软件来创建媒体资源。 二、插入 Flash 媒体元素 插入 Flash 媒体元素包括插入 ...
js获取元素在浏览器中的绝对位置
12-03
JavaScript中提供获取HTML元素位置的属性： HTMLElement.offsetLeft HTMLElement.offsetHeight 但 是需要注意的是，这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置，而是相对于其父元素位置的相对位置，也就是说这两个数值得到的是以其 父元素左上角为(0,0)点从而计算出的数值。那么如何得到一个HTML元素的绝对位置呢，可以用以下函数： 代码如下: //获取元素的纵坐标 function getTop(e){ var offset=e.offsetTop; if(e.offsetParent!=null) offset+=ge
position:absolute和position:fixed元素位置和宽度高度的问题
weixin_37994110的博客
03-26 4321
绝对定位或者固定定位的元素可以用left、right、top、bottom四个属性指定，那么这四个属性与元素所处的位置还有元素的宽度和高度有什么关系呢？ left、right、top、bottom四个属性全部指定 代码如下： html和css <!DOCTYPE html> <html lang="en"> <head> <meta charset="...
【html】获取元素的绝对定位&相对定位（getBoundingClientRect）
sylbiubiubiu的博客
09-01 1559
【html】获取元素的绝对定位&相对定位（getBoundingClientRect）
获取当前元素的位置
weixin_30739595的博客
06-27 805
获取页面某一元素的绝对X,Y坐标，可以用offset()方法： var X = $('#DivID').offset().top; var Y = $('#DivID').offset().left; 获取相对(父元素)位置: var X = $('#DivID').position().top; var Y = $('#DivID').position().left; var ...
获取元素位置
水中熊的博客
12-22 525
最近做了很多获取元素位置的交互，最开始接触的是下面的这些，做了比如网页区域懒加载、一键回到网页顶部等。 为了理解这些属性，我们需要知道HTML元素的实际内容有可能比分配用来容纳内容的盒子更大，因此可能会出现滚动条，内容区域是视口，当实际内容比视口大的时候，需要把元素的滚动条位置考虑进去。 1. clientHeight和clientWidth用于描述元素内尺寸，是指 元素内容+内边距
获取元素的定位值
baifu2766的博客
09-12 112
1、绝对定位 jquery获取元素的top值： $('#aa').offset().top; 2、相对定位 jquery获取元素的top值： $('#aa').position().top; 转载于:https://www.cnblogs.com/Zting00/p/7497682.html...
获取元素计算定位
tianranran的博客
01-12 100
<div class="outer"> <div class="inner"> asdflj <span>asdfljasl</span> </div> </div> <script src="js/tools.js"></script> <script> // 获取元素的计算定位 console.log($('.inner').o
JavaScript如何获得一个DOM元素的绝对位置？（获取元素位置，不依赖框架）
wangshengfei
04-06 4524
JavaScript如何获得一个DOM元素的绝对位置？（获取元素位置，不依赖框架） function offset(ele) { var top = ele.offsetTop; var left = ele.offsetLeft; while (ele.offsetParent) { ele = ele.offsetParent; if
redis list 获取某个元素的索引位置_Redis从入门到入土——Redis的数据类型
最新发布
05-26
在Redis中，获取某个元素在list中的索引位置可以使用`LPOS`命令。该命令的使用方法如下： ``` LPOS key element [start] [stop] ``` 其中，`key`表示操作的list的键名，`element`表示要查找的元素值，`start`和`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值