节点属性、offset*获取元素尺寸、offsetLeft获取元素定位

最新推荐文章于 2024-07-25 11:26:35 发布
最新推荐文章于 2024-07-25 11:26:35 发布
阅读量1k 收藏 1
点赞数
分类专栏： web前端开发 文章标签： html java 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1598452168YY/article/details/127422078
版权

1、节点属性

节点属性汇总

- nodeType nodeName nodeValue 元素节点 1 大写标签名 null 属性节点 2 属性名 属性值 文本节点 3 #text 文本内容 注释节点 8 comment 注释内容

● 如果看到nodeType等于1，说明这个节点是元素节点，其他的同理；

● 节点属性一般用来判断某个节点是什么类型的节点； 

2、获取元素尺寸

● getComputedStyle（元素对象）.width：只能获取到元素最里面内容的尺寸，获取不到包含这个盒子的边框和内边距的尺寸；

● 今天写的属性可以获取到包括边框和内边距的尺寸

语法：

offsetWidth：获取的是元素：内容+padding+border的宽度

offsetHeight：获取的是元素：内容+padding+border的高度

clientWidth：获取的是元素：内容+padding的宽度

clientHeight：获取的是元素：内容+padding的高度

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE&
最低0.47元/天 解锁文章
陌一一
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
获取offsetTop和offsetLeft值的js代码(兼容)
10-27
offsetTop和offsetLeft的值在某些特殊的情况下是会使用到的，为了实现值的准确获取，本文采用js代码实现下，有需求的朋友可以参考下哈
js 获取元素在页面上的偏移量的方法汇总
10-24
javascript可以通过四个属性可以获得元素的偏移量，分别是1、offsetHeight，2、offsetWidth，3、offsetLeft，4、offsetTop，今天我们就来具体谈一下获取页面元素偏移量的最佳方法。
offsetLeft,offsetWidth,offsetX,
qq_45178972的博客
04-10 333
1.offsetLeft:离最近一个带定位父盒子的left距离，通过offsetParent可查看该定位父盒子，如果没有的话，就默认是body 2.offsetWidth: 水平方向 width + 左右padding + 左右border 3.鼠标事件当中的offsetX: 比如在一个dom元素中的某个位置点击之后，这个位置距离当前dom的左边距离 ...
元素的位置属性offset、client、scroll
Mahuicool的博客
12-27 451
引用一张图可以直观表示这些属性。
vue里实现拖拽功能 拖动一个元素来获取left值
like_you_aha的博客
08-04 1000
vue里实现拖拽功能 项目需求 拖动一个元素来获取left值 先上代码 <span class="burstPoint-img" v-drag> <i class="iconfont icon-shihuomiao"></i> </span> directives: { drag(el, binding, vnode) { let dragBox = el; // vnode.context 是整个vue实例 相当于this
offsetLeft与小程序
sinat_38728634的博客
11-21 1841
正常的offsetLeft是指子元素到设置有定位属性的父元素的左上角的X轴方向的距离，即使父元素设置有padding，也是以左上角的点为坐标的。但是在微信小程序中通过点击事件函数中event参数中的offsetleft（函数参数event中的currentTarget或者target中）如果父级设置有padding的话，会以padding内形成的新的原点为坐标，这时如果需要仍以左上角为坐标的话需要...
得到元素的位置top ,left
08-15 818
//Colour pallete top offsetfunction getOffsetTop(elm) ...{    var mOffsetTop = elm.offsetTop;    var mOffsetParent = elm.offsetParent;    while(mOffsetParent)...{        mOffsetTop += mOffsetParent.
vue项目中获取个人位置信息
akedf的博客
01-01 1705
5.创建完之后返回之前的JS API配合vue选项中去（由于这里只是教学怎么获取位置，里面还可以将自己当前的位置以map地图的方式展现出来，有感兴趣的话可以另外学习）4.新建key，tip:您在2021年12月02日以后申请的key需要配合您的安全密钥一起使用。在地图组件 MapContainer.vue 中引入 amap-jsapi-loader。选择web端）（JSAPi），由于我们的项目是基于js上的则要选择相对应。最后在通过以下方法保证key的安全性（使安全key得以使用）
对于offsetLeft的一些简单理解
WEB前端探索者~~
11-07 1071
这个问题是我今天看图片轮播源码想到的，以前一直有一点疑问，在这里测试一下。在js中，有很多情况需要对元素重新定位，用一个obj.style.left||obj.offsetLeft 来取得该元素的left。offsetLeft返回一个Number型，如100；style.left返回一个String型，如100px；而offsetLeft不可以被从新写，所以大多是用offsetLeft来得到数字再+
用JavaScript获取DOM元素位置和尺寸大小的方法
10-27
本文将深入探讨如何利用JavaScript获取DOM元素的位置和尺寸，并解释相关属性。 首先，我们要了解几个关键的属性： 1. `offsetWidth` 和 `offsetHeight`：这两个属性返回元素的完整外尺寸，包括内容、内边距和边框...
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
10-21
在本文中，我们将深入探讨如何使用JavaScript获取浏览器高度、窗口高度、元素尺寸以及元素的偏移属性。这些都是前端开发中常见的需求，理解并掌握这些方法对于优化用户体验至关重要。 首先，我们来看如何获取浏览器...
JavaScript DOM元素尺寸和位置
10-24
- 对于响应式设计，这些尺寸属性有助于判断元素是否需要调整以适应不同的屏幕尺寸。 - 在处理滚动事件或自定义滚动条时，scrollWidth、scrollHeight、scrollLeft和scrollTop是必不可少的。 综上所述，JavaScript...
vue中点击节点获取节点的位置
lxy123456780的博客
03-05 5684
在节点绑定点击事件 &lt;div @click="posilDiv($event)"&gt;&lt;/div&gt; posilDiv(event){ var DOM = event.currentTarget; // 获取节点距离浏览器视口的高度 var top = event.currentTarget.getBoundingClientRect().top; // 获取节点距离浏览...
vue 获取dom节点 dom节点位置
weixin_42508580的博客
11-17 3083
vue 获取dom 1.使用res <div class="cover" ref="div"></div> 2.使用this.refs[′name′]或this.refs['name'] 或 this.refs[′name′]或this.refs.name,即可获取dom节点 this.$refs['div'] 3.获取dom的位置 getBoundingClientRect()可以打印出dom 的位置宽高等信息 this.$refs['div'].getBoundingClient
Vue3中如何获取DOM节点信息
qq_42778325的博客
11-04 1767
Vue3中如何获取DOM节点
获取offsetLeft，offsetTop值不准的原因
fwx02的专栏
12-17 5722
遇坑总结： 决定offsetLeft、offsetTop的唯一因素是当前节点和offsetParent节点的偏移关系。 也就是说只与offsetParent有关，那么怎么确定一个元素的offsetParent呢？ 一个元素的offsetParent可以是以下其中之一： 具有position属性（除了static值以为，而position默认值为static）的最近父元素； 最近的table，table cell父元素； 根节点元素； 设置了动画transform:translate的最近父元素；
offset属性
qq_39588041的博客
05-07 506
当 offsetParent 为 body 时，offsetLeft = （offsetParent 的 margin-left ） + (offsetParent 的 border-width) + (offsetParent 的padding-left) + (当前元素的 margin-left)；当 offsetParent 为定位元素时，offsetLeft = offsetParent...
vue 实现无缝向左滚动 鼠标悬停、离开时停止、开始滚动
疑问 搜索 动手 解决 记录
03-23 2187
效果: 可以根据此代码改为轮播 html代码： <template> <div class="announcement"> <div class="cont"> <div class="contlist" ref="contlist" @mouseover="stopScroll" @mouseout="startScroll" > <u
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
最新发布
xcLeigh
07-25 2741
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
event.target获取元素css定位
05-10
使用 `event.target` 可以获取触发事件的元素，然后可以通过元素的 `offsetLeft` 和 `offsetTop` 属性获取其相对于其父元素的水平和垂直偏移量，从而得到元素的位置。例如： ```html ; left: 50px; top: 100px;">...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陌一一

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值