JS中获取元素位置以及宽高的各种属性整理

最新推荐文章于 2022-12-10 12:07:11 发布
最新推荐文章于 2022-12-10 12:07:11 发布
阅读量707 收藏
点赞数
分类专栏： web前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiongqiangwin1314/article/details/48262963
版权

clientWidth: width+pad左+pad右-滚动条宽度

clientHeight: height+pad上+pad下-滚动条高度

clientLeft: 值即为div的border-left设置的值

clientTop: 值即为div的border-top设置的值


offsetWidth: width+pad左+pad右+border左+border右

offsetHeight: height+pad上+pad下+border上+border下

offsetLeft: div border-left外距离HTML文档左部的距离，并不是相对于body

offsetTop: div border-top外距离HTML文档顶部的距离，并不是相对于body


scrollWidth: div水平滚动的总宽度=clientWidth

scrollHeight: div垂直滚动的总高度

scrollTop: div垂直滚动超出div被隐藏部分的高度，不叠加border

 


微枫1993
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
获取页面元素实际宽高的属性的使用
08-21
一些关于获取页面元素实际宽高的属性的使用
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
chelen_jak的专栏
10-29 690
原文出处：https://www.imooc.com/article/17571 每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性，单凭单词很难搞清楚分别代表什么意思之间有什么区别。通过阅读它们的文档总结出规律如下： clientHeight和offsetHeight属...
js获取元素width和height
weixin_40216358的博客
11-18 1998
getBoundingClientRect：该方法返回元素的大小及其相对于视口的位置 语法：Element.getBoundingClientRect() 使用： 获取宽度：Element.getBoundingClientRect().width 获取高度：Element.getBoundingClientRect().height 范围：content+padding+border 是否支持小数点：支持 getComputedStyle：方法返回一个对象，该对象在应用活动样式表并解析.
JS：获取元素宽高的几种方式
干饭搬砖两不误。
02-02 3万+
关于JS获取元素宽高时，有的获取不到想要的值
获取元素高度与宽度
weixin_45932733的博客
09-09 5639
1.在js中获取元素的高度与宽度,用到这两个api分别为offsetWidth与offsetWidth const width = document.body.offsetWidth const height = document.body.offsetheight 2.同理获取id或者class的高度与宽度同一类似，id与class就是你所取的名字 const width = document.getElementById("id").offsetWidth const height = documen
[转]js checkBrowser
weixin_30727835的博客
10-13 220
[转]js checkBrowser <script type= "text/javascript " language= "javascript "> <!-- function checkBrowser() { var ClientInfo= " "; ClientInfo = ClientInfo...
js 各种位置获取全解（包括元素属性、鼠标位置、滚动位置）
在下月亮有何贵干
01-14 1513
目录普通元素元素四周三级目录 普通元素 如果不了解盒子模型建议先阅读一下：css 盒子模型详解。 offsetLeft、offsetTop（左边与上边与设置了定位的父级的距离） offsetWidth、offsetHeight（可视宽高，内容区+padding+border+滚动轴宽度（如果存在）） clientLeft、clientTop （左、上边框宽度） clientWidth、clientHeight（内容区+padding，不包括border） scrollTop、scrollLeft（水平垂直
js获取元素宽高和位置的几种方法&&点击事件坐标
tinfengyee的博客
02-04 3249
一.获取宽高： 1.行内样式获取宽高： var dom= document.getElementById("div"); var divWidth = dom.style.width; var divHeight = dom.style.height; 注：只能通过行内样式才能获取到。获取到的元素宽高不包括padding和border 2.offset/client/scroll方法获取： va...
JS中的位置属性合集
五花漏的博客
03-12 557
一 二 width() - 设置或返回元素的宽度（不包括内边距、边框或外边距）。 height() - 设置或返回元素的高度（不包括内边距、边框或外边距）。 innerWidth() - 返回元素的宽度（包括内边距）。 innerHeight() - 返回元素的高度（包括内边距）。 outerWidth() - 返回元素的宽度（包括内边距和边框）。 outerHeight() ...
js 获取元素位置和大小_js 位置_Js宽度高度（详解）
天马3798
12-10 3500
如obj.style.top、obj.style.wdith等，在读的时候，他们返回的值常常是带有单位的(如px)，同时，对于这种方式，它只能够获取到该元素的行内样式，而并不能获取到该元素最终计算好的样式，这就是在读取属性值得时候和以上只读属性的区别，要获取计算好的样式，请使用obj.currentstyle（IE）和getComputedStyle(IE之外的浏览器)。该属性指的是当元素其中的内容超出其宽高的时候，元素被卷起的高度和宽度，即滚动条宽高度。
在vue中获取dom元素内容的方法
08-30
本篇文章主要介绍了在vue中获取dom元素内容的方法，可以通过给标签加ref属性，这里整理了详细的代码,有兴趣的可以了解一下
js里取容器大小、定位、距离等属性搜集整理
12-09
element.clientWidth　//元素的实际宽度,不算边框 element.clientHeight　//元素的实际高度,不算边框 element.offsetWidth　//元素的实际宽度,加上边框 element.offsetHeight　//元素的实际高度,加上边框 element....
JavaScript通过HTML的class来获取HTML元素的方法总结
10-22
除了getElementsByClassName()函数,我们可以自己动手编写程式来通过class获取元素,接下来我们整理了一下JavaScript通过HTML的class来获取HTML元素的方法总结,需要的朋友可以参考下
原生JS与JQ获取元素的区别详解
11-21
刚学JQ不久，有时候可能会把JS和JQ获取元素的方式搞错，接下来获取属性方法什么的就一发不可收拾了，现在把两者获取获取元素的代码整理下。 一.原生JS获取元素。 1.常用的三种方式获取元素对象（将指定的元素封装成...
利用原生JavaScript获取元素样式只是获取而已
01-19
1、element.style:只能获取写在元素标签中的style属性里的样式值，无法获取到定义在<style></style>和通过<link href=”css.css”>加载进来的样式属性 代码如下: var ele = document....
窗口缩放导致页面排版错乱的解决方法
热门推荐
xiongqiangwin1314的专栏
08-22 4万+
简单的说就是设置body的宽度，那么如何动态的获取浏览器减去侧边滚动条之后的宽度，原理就是通过创建一个带有 滚动条的div（也就是overflow:scroll），利用offsetWidth-clientWidth得到滚动条的宽度，再利用 window.screen.availWidth减去滚动条的宽度即可得到浏览器除了滚动条以外的宽度，body再设置该宽度，即可解决 缩放排版错乱的问题，代
html5 canvas拓展clearRect()实现圆形区域清理
xiongqiangwin1314的专栏
09-19 1万+
canvas提供的clearRect(x, y, width, height)方法只能清理出特定位置的矩形区域，以下代码则能实现对圆形区域的清 理，主要是利用计算圆周率时的方法，将整个圆切成一个一个细小的正方形，然后再通过clearRect(x, y, width, height) 方法将一个一个细小的正方形区域清理。 canvas{ border:1px solid b
CSS3:nth-child(n)与nth-child(2n+1)中n的区别。
xiongqiangwin1314的专栏
07-26 1万+
索引为0，为父元素ul的第一个元素。 索引为1，为父元素ul的第二个元素。 索引为2，为父元素ul的第三个元素。 索引为3，为父元素ul的第四个元素。 索引为4，为父元素ul的第五个元素。 索引为5，为父元素ul的第六个元素。 索引为6，为父元素ul的第七个元素。 索引为7，为父元素ul的第八个元素。 索引为8，为父元素ul的第九个元素。 索引
ajax传参给php，php连接服务器数据库并返回数据过程详解
xiongqiangwin1314的专栏
09-03 1万+
首先，需要搭建个php与sql数据库运行环境，笔者用的是wampserver，将下述代码置于www的根目录中即可，需要自己链接个jquery库，详细的搭建过程见网址：http://www.360doc.com/content/13/1113/09/426480_328813961.shtml 主要需要注意phpAdmin中的数据库的权限以及数据表的建立。 然后HTML端利用jquery对aja
svg 获取元素的宽高
最新发布
12-08
以下是基于svg元素的js对象获取属性的方法： ```javascript // 获取svg元素的宽度和高度 var svg = document.getElementById("svgId"); // 获取svg元素 var width = svg.getAttribute("width"); // 以attribute的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值