DOM学习实用路线（9）——DOM元素的尺寸获取-offset

最新推荐文章于 2022-08-03 09:44:08 发布
最新推荐文章于 2022-08-03 09:44:08 发布
阅读量434 收藏
点赞数 1
分类专栏： Web前端 原生JavaScript JS——DOM 文章标签： 定位 css html dom js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013946061/article/details/105431110
版权

元素的尺寸获取


  • offset
    • offsetWidth 可视宽度
    • offsetHeight 可视高度
    • offsetLeft 距离定位父级的left坐标
    • offsetTop 距离定位父级的top坐标

offsetWidth 可视宽度
offsetHeight 可视高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            margin: 50px auto;
            position: relative;
            width: 500px;
            height: 500px;
            border: 1px solid #000;
        }
        #div {
            position: absolute;
            left: 100px;
            top: 100px;
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
 <div id="box">
     <div id="div"></div>
 </div>   
<script>
{
    let div = document.querySelector("#div");
    console.log(div.offsetWidth, div.offsetHeight);
}

</script>    
</body>
</html>

在这里插入图片描述
在这里插入图片描述


padding上下左右各30，所以宽高增加60.

 #div {
     position: absolute;
     left: 100px;
     top: 100px;
     width: 100px;
     height: 100px;
     padding: 30px;
     background: red;
 }

在这里插入图片描述
在这里插入图片描述


增加border

 #div {
     position: absolute;
     left: 100px;
     top: 100px;
     width: 100px;
     height: 100px;
     padding: 30px;
     border: 5px solid #000;
     background: red;
 }

在这里插入图片描述
在这里插入图片描述


offsetLeft 距离定位父级的left坐标
offsetTop 距离定位父级的top坐标

可视宽高 = width(height) + padding + border
offsetTop/offsetLeft: 元素距离定位父级左上角的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            margin: 50px auto;
            position: relative;
            width: 500px;
            height: 500px;
            border: 1px solid #000;
        }
        #div {
            position: absolute;
            left: 100px;
            top: 100px;
            width: 100px;
            height: 100px;
            padding: 30px;
            border: 5px solid #000;
            background: red;
        }
    </style>
</head>
<body>
 <div id="box">
     <div id="div"></div>
 </div>   
<script>
// offset  可见的、可视的
/*
    offsetWidth
    offsetHeight
    offsetTop
    offsetLeft
*/
{
    let div = document.querySelector("#div");
    console.log(div.offsetWidth,div.offsetHeight);
    console.log(div.offsetLeft,div.offsetTop);
}

</script>    
</body>
</html>

在这里插入图片描述
在这里插入图片描述
我们可以PS再验证一下，offsetLeft: 元素距离定位父级左上角的距离是100px。
在这里插入图片描述
offsetTop: 元素距离定位父级左上角的距离是100px。
在这里插入图片描述


加上margin（上面加50像素）

 #div {
     position: absolute;
     left: 100px;
     top: 100px;
     margin: 50px 0 0 ;
     width: 100px;
     height: 100px;
     padding: 30px;
     border: 5px solid #000;
     background: red;
 }

在这里插入图片描述
我们可以PS再验证一下
在这里插入图片描述


margin 左侧也加上距离-100像素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            margin: 50px auto;
            position: relative;
            width: 500px;
            height: 500px;
            border: 1px solid #000;
        }
        #div {
            position: absolute;
            left: 100px;
            top: 100px;
            margin: 50px 0 0 -100px;
            width: 100px;
            height: 100px;
            padding: 30px;
            border: 5px solid #000;
            background: red;
        }
    </style>
</head>
<body>
 <div id="box">
     <div id="div"></div>
 </div>   
<script>
// offset  可见的、可视的
/*
    offsetWidth
    offsetHeight
    offsetTop
    offsetLeft
*/
{
    let div = document.querySelector("#div");
    console.log(div.offsetWidth,div.offsetHeight);
    console.log(div.offsetLeft,div.offsetTop);

    let box = document.querySelector("#box");
    console.log(box.offsetLeft,box.offsetTop);
}

</script>    
</body>
</html>

浏览器变化，box也会变化，box上一级无定位，因此它的定位父级就是父级body。
在这里插入图片描述




（后续待补充）

溜_x_i_a_o_迪
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
获取dom元素相关参数
gary的博客
08-21 490
clientHeight 获取对象的高度，不计算任何边距、边框、滚动条，但包括该对象的补白。 clientLeft 获取 offsetLeft 属性和客户区域的实际左边之间的距离。 clientTop 获取 offsetTop 属性和客户区域的实际顶端之间的距离。 clientWidth 获取对象的宽度，不计算任何边距、边框、...
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
10-23
- **offset()**：返回元素相对于文档的偏移，包括`left`和`top`属性。 - **position()**：返回元素相对于最近的定位父元素的偏移。 - **scrollTop/scrollLeft**：返回元素的滚动条在垂直或水平方向上的位置。 了解...
offset和client获取dom元素位置信息
cyj5201314的博客
04-18 527
offset获取元素宽高和偏移量 offsetTop获取元素上部相对于带定位的父元素偏移的距离，若父元素均不带定位则返回相对于body的距离 offsetLeft作用同offsetTop offsetParent返回元素带有定位的父元素，父元素均不带定位则返回body offsetWidth返回元素元素宽度，包括padding，边框，内容区域的宽度 offsetHeight作用同offsetWidth offset与style的区别 最明显的区别在于offset获取到的属性值是只读属性，不能用于修改元
js获取某dom到根元素的offsetLeft/offsetTop
sandy_yuyan的博客
01-14 1560
前言 大家知道，offsetLeft和offsetTop都是获取当前元素到其定位父级（offsetParent）的距离，我前面也有很多文章介绍宽高和offset,例如：https://www.haorooms.com/post/js_jquery_height 等 在实际的开发过程中，我们通常要获取dom到根元素的距离。这个如何做呢？ 思路 其实很简单，父元素是offsetParent，我们循环查...
DOM中的offset属性
u010234868的专栏
08-25 321
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } #box { width: 300px; height: 300px; margin: 50px; background-color: red; .
offsetTop
qq_45178972的博客
03-21 202
1.DOM元素都有offsetTop属性，表示此属性到定位祖先元素的垂直距离 2.定位祖先元素：在祖先中，离自己最近的且拥有定位属性的元素
jQuery获取页面及个元素高度、宽度的总结——超实用
12-11
在JavaScript的世界里，jQuery库提供了一种简洁的方式来处理DOM操作，包括获取页面和元素的高度与宽度。本篇文章将深入探讨如何使用jQuery获取不同层面的高度和宽度，以及与滚动条相关的属性。 首先，我们来了解几...
Angular.JS通过指令操作DOM的方法
12-03
在AngularJS中，DOM操作是通过指令来实现的，遵循其设计原则——隔离复杂性，将数据绑定和视图更新的逻辑分离。控制器主要负责管理数据模型，而指令则用于扩展HTML并处理与DOM相关的任务。AngularJS内建了一个轻量级...
jQuery自定义插件开发基础1——jQuery实用函数的实现
04-18
- 定位：根据屏幕尺寸和用户偏好调整对话框的位置，可能使用`$.offset()`或`.css()`方法。 - 内容：通过设置对话框内部元素的HTML或文本内容来更新显示的信息。 在实际开发中，我们还需要考虑与其他jQuery插件的...
通过dom元素获得offsetTop和通过jquery获得offsetTop值不一致
qq_36635569的博客
04-14 1475
document.getElementById(id).offsetTop 不等于$(selecter).offset().left 后者更接近与真实值
js获取元素的偏移量offset简单方法(必看)
10-19
下面小编就为大家带来一篇js获取元素的偏移量offset简单方法(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
（DOM） offsetHeight、clientHeight 与 scrollHeight
weixin_34411563的博客
10-16 116
一、图示 二、解释 三者都以px计。 offsetHeight：包括内容可见部分的高度，border，可见的padding，水平方向的scrollbar（如果存在）；不包括margin。 clientHeight：包括内容可见部分的高度，可见的padding；不包括border，水平方向的scrollbar，margin。 scrol...
#offsetLeft获取div的
Venciki的博客
05-15 557
javascript练习 offsetLeft 获取 div 的left值
DOM元素的各种尺寸offsetHeight/Width,clientHeight/clientWidth,offsetLeft/Top,
Walter的博客
08-19 450
1、#box{height: 300px;width: 300px;background:red;margin: 100px 200px;border: 100px solid #000;padding: 100px;/margin: 0;/position: absolute;} 2、offsetHeight/Width:是指元素的实际宽高，即content的宽高 + padding值 + bo
[DOM基础]offsetHeight,clientHeight,scrollHeight,innerHeight,outerHeight等属性的解释
大强aken的博客
02-08 519
偏移量-以offset开头的 offsetHeight：元素在垂直方向上占用的空间大小，像素。包括元素的高度、可见的水平滚动条的高 度、上边框高度和下边框高度。 offsetWidth：同上，水平上占用的空间。 offsetLeft：元素的左外边框至包含元素的左内边框的距离 offsetTop：同上，上部的距离 所有的偏移量属性都是只读的，而且每次访问都要重新计算，避免重复访问 客户区大小-以client开头的 clientHeight：内容区+内边距的高度 clientWidth：同上，宽度
dom之高级补充（offset系列，scroll,client）
isxixi的博客
12-07 696
offset系列 offsetWidth和offsetHeight 用来得到对象的大小 offsetHeight和style.height的区别demo.style.height只能获取行内样式，如果样式写到了其他地方，甚至根本就没写，便无法获取 style.height是字符串（而且带单位），offsetHeight是数值 demo.style.height可以设置行内样式，offsetHe
DOM 中的 offset 属性
xingye123_的博客
09-05 1577
1. DOM 中的 offset 属性 1.1. offsetParent 与当前元素最近的经过定位(position 不等于 static)的父级元素，主要分为下列几种情况： 元素自身有 fixed 定位，offsetParent 的结果为 null 当元素自身有 fixed 固定定位时，我们知道固定定位的元素相对于视口进行定位，此时没有定位父级，offsetParent 的结果为 n...
JavaScript DOM:元素偏移量 offset 系列、元素可视区 client 系列、元素滚动 scroll 系列
七七的博客
08-03 338
offset、client、scroll、window.pageYOffset比较
DOM节点获取元素的偏移量等属性词
shuailong1993的博客
05-25 645
节点属性 每一个节点都有自己的特点 这个节点属性就记录着属于自己节点的特点 1. nodeType(以一个数字来表示这个节点类型) 语法: 节点.nodeType 得到: 一个数字, 代表着这个节点的类型 元素节点: 1 属性节点: 2 文本节点: 3 注释节点: 8 例子: 将来我获取到某一个节点, 我不确定他是不是元素节点 我只要判断他的 nodeType === 1 那么这个节点一定是一个元素节点 2. nodeName(节点名称) 语法: 节点.nodeName 得到: 一个名称, 属于这个节点的名
vue通过——属性获取相应DOM元素
最新发布
06-08
在 Vue.js 中，可以通过 `$refs` 属性获取相应的 DOM 元素。具体操作如下： 1. 在 HTML 中给需要获取的 DOM 元素添加一个 ref 属性，例如： ```html 这是一个需要获取的 div 元素 ``` 2. 在 Vue 组件中使用 `$...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值