各种查看距离的方法和元素大小

最新推荐文章于 2021-07-19 16:35:16 发布
最新推荐文章于 2021-07-19 16:35:16 发布
阅读量914 收藏
点赞数 2
文章标签： css javascript html jquery css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44799466/article/details/107381179
版权

一、可视区域窗口大小

innerWidth/innerHeight

二、查看元素尺寸

offsetWidth offsetHeight 查看视觉上的尺寸大小

三、查看元素的位置

offsetlLeft offsetTop 对于无定位父级的元素 返回相对文档的坐标，对于有定位父级的元素 返回相对于最近的有定位的父级的坐标

pageX,pageY（相对于页面的最顶端）

clientX,clientY==x,y（相对于视口的距离，类似于fix）

offsetX,offsetY (鼠标相对于事件源内边距 的坐标)鼠标点的位置

window.pageXoffset 滚动条滚动距离

offsetTop 距离页面最顶端

window.innerHeight 页面屏幕的高度

图片如下：

在这里插入图片描述

我的代码匠
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
【获取网页元素高宽及距离的三大系列】
m0_64288219的博客
06-18 240
offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度） 注意：返回的数值都不带单位 offset系列常用属性： offset系列属性 作用 1 element.offsetParent 返回作为该元素带有定位的父级元素如果父级都没有定位则返回body 2 element.offsetTop 返回元素相对带有定位父元素上方的偏移 3 element.offsetLeft 返回元素相对带有定
axure 怎么在网页预览的时候能看到组件风格的设置，间距的说明
weixin_42592399的博客
12-29 455
在 Axure 中，您可以通过打开「组件风格」面板来查看和设置组件风格。 要打开「组件风格」面板，请依次单击「视图」菜单下的「面板」，再单击「组件风格」。 在「组件风格」面板中，您可以看到当前所选组件的各种样式属性，包括字体、字体大小、颜色、背景色等。 您还可以使用「间距」选项卡来调整组件内部元素之间的间距，以及组件与其他元素之间的间距。 在网页预览的时候，您可以使用「组件风格」面板来查看和调整组...
adobe xd使用的几点记录
reffrselom的博客
12-30 1380
记录一下xd使用，还不熟悉，偶尔画一画东西，防止忘记 1. 新建画板 快捷键：A，即切换到画板模式，鼠标点击文档空白处即可新建画板， 右侧面板是画板各移动端型号和不同分辨率参考模板 2. 缩放画板 按住Alt键，滚动鼠标可缩放 ctrl键，结合+/-可进行画板缩放 3. 图标使用 图标库建议使用iconfont，图标导出为svg/AI，直接拖入画板，即可使用 4. 图层选中 鼠标点选-直接选...
测量网页元素的大小和间距的利器
gp5251的专栏
08-30 7183
一般而言，对于测量页面某个元素的大小，直接f12打开开发者工具inspect目标元素就好了，但如果要测量其他，如两个元素间的距离，是不是就没那么方便了？ 这里安利一款chrome插件，better ruler，可以很方便的测量各种距离，更重要的是，它支持吸附到元素，再也不用眯着眼去量一两像素的差异了。 点击插件图标即可开始测量，再次点击将退出测量。 移动鼠标的同时按住A...
用JavaScript获取DOM元素位置和尺寸大小的方法
10-27
在JavaScript中，DOM元素的位置和尺寸大小是网页动态交互中不可或缺的部分。DOM（Document Object Model）是HTML和XML文档的结构化表示，它允许我们通过编程方式操作文档的各个元素。本文将深入探讨如何利用...
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
10-18
今天小编就为大家分享一篇vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
让html元素随浏览器的大小自适应垂直居中的实现方法
11-24
但是很多时候会用到元素跟随浏览器的大小垂直居中，如在制作展示官网、活动展示网等等的时候。 问题： 实现div垂直居中并在缩放浏览器尺寸的时候仍然居中。 解决方案： 1、浏览器可视区域的高度-元素的高度/2 = 元素...
详解JavaScript中的坐标和距离
10-16
了解这些属性和方法后，开发者可以轻松实现各种功能，如精确的元素定位、动态调整布局以及创建平滑的滚动效果。在处理复杂的前端交互时，熟练掌握JavaScript中的坐标和距离计算能显著提高工作效率和代码质量。记住，...
Vue获取页面元素的相对位置的方法示例
10-15
首先，`getBoundingClientRect()` 是JavaScript中的一个原生方法，它可以返回一个元素的大小及其相对于视口的位置。但需要注意的是，这个方法返回的位置是相对于浏览器的视口，而不是整个文档。这意味着当页面滚动时...
offsetLeft、offsetTop、offsetWidth、offsetHeight属性
diaozhen9799的博客
09-23 297
首先让我们先看一看element.offsetLeft属性。 支持的浏览器：InternetExplorer4.0+，Mozilla1.0+，Netscape6.0+，Opera7.0+，Safari1.0+ 定义：返回一个像素数值，它表示当前元素的左边缘到它的offsetParent属性返回的对象左边缘的偏移量。 句法： leftDis=elem...
获取页面的各种距离
HuangChunLei_的博客
07-19 511
vue 中使用 created(){ this.listenerFunction(); }, beforeDestroy() { document.removeEventListener("scroll", this.listenerFunction); }, methods:{ listenerFunction() { document.addEventListener("scroll", this.handleScroll, true); }, handleScr
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
热门推荐
xuantian868的专栏
10-21 9万+
  HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度o
浅谈offsetleft与left系列的区别
哎
03-14 8533
在复习javascript运动框架的过程中，又遇到了offset属性，之前一直比较模糊的一个知识点，今天各方查阅资料总算有了一个比较清楚地认识，特来道一道其中真谛！ 首先来一段代码测试测试！ 未定义 div{ width:100px; height:100px; border:5px solid red; background-color:gre
JS获取页面的各种距离总结
stanwuc的博客
09-20 6094
1.screen系列 screen.width:屏幕的宽度 screen.height:屏幕的高度
xd使用技巧_adobe xd高级技巧
weixin_39996750的博客
12-20 5509
xd一键替换所有字体妙招：按字体名称搜索到系统字体，然后删除(粘贴在桌面进行备份)，在软件中设置替换即可，替换完成后，再将字体重新安装进入。图形注意不要双击，这样就被路径化了，有圆角的无法再设置圆角值。xd移位置整数去除小数点：选择需要的元素，右击对齐像素网络，注意图标类会变形。一键替换背景色、颜色、字体、字号：右击画布高亮显示，点击编辑，全部替换。psd如何粘贴至xd：psd粘贴到ai，再从ai...
查看元素的尺寸和元素位置
qq_40860137的博客
04-28 240
1.元素的尺寸 elem.offsetWidth /offsetHeight width 和 height 是看起来多大的, 并不是实际内容区, 可以用elem.style.width / height 间接访问元素属性(不包括margin) 2. 元素位置 elem.offsetLeft / offsetTop 如果父级有定位, 自己也有, 返回距最近定位父级之间的top和...
网页图片尺寸查看方法
alexlau2016的博客
03-23 1856
下方都看的是我的学习上课程图片大小来进行定位及大小查看，我们想获得我的学习课程图片这里的推荐大小该如何从“PC”和“手机端”分别查看呢？以哪个为主呢？ 下1为PC端图片比例查看，2为手机端图片比例查看，PC端和手机端同样的页面，结果相同，所以此处课程图片的上传比例我们推荐给客户 长：宽=1.5 即可。 1.PC端某个地方上传图片如何看？F12后点击右侧红框位置，然后定位左侧待看图片比...
如何获取一个元素的大小和位置
最新发布
04-27
您可以使用JavaScript中的`getBoundingClientRect()`方法来获取元素的大小和位置。该方法返回一个包含元素位置和大小信息的DOMRect对象。例如，以下代码将获取一个id为“myElement”的元素的位置和大小信息： ``` var element = document.getElementById("myElement"); var rect = element.getBoundingClientRect(); console.log(rect.width); console.log(rect.height); console.log(rect.top); console.log(rect.bottom); console.log(rect.left); console.log(rect.right); ``` 其中，`rect.width`和`rect.height`属性分别是元素的宽度和高度，`rect.top`和`rect.bottom`属性表示元素顶部和底部相对于视口的距离，`rect.left`和`rect.right`属性表示元素左侧和右侧相对于视口的距离。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值