开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

获取子元素相对于侧视口中的位置

可以使用JavaScript中的getBoundingClientRect()方法。该方法返回一个DOMRect对象，包含了元素的位置信息，包括左边距（left）、上边距（top）、右边距（right）和下边距（bottom）。

使用getBoundingClientRect()方法可以计算出子元素相对于侧视口的位置，可以通过以下步骤来实现：

首先，获取到需要获取位置的子元素的引用，可以使用document.querySelector()或document.getElementById()等方法来获取元素的引用。
然后，使用getBoundingClientRect()方法获取子元素的位置信息，将其赋值给一个变量，例如rect。
最后，可以通过rect对象的属性来获取子元素相对于侧视口的位置信息，例如rect.left表示子元素相对于侧视口左边的距离，rect.top表示子元素相对于侧视口顶部的距离。

获取子元素相对于侧视口中的位置可以用于实现一些与元素位置相关的功能，例如判断元素是否在可视区域内、实现滚动到指定位置等。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云计算产品：https://cloud.tencent.com/product
云原生产品：https://cloud.tencent.com/product/cns
人工智能产品：https://cloud.tencent.com/product/ai
物联网产品：https://cloud.tencent.com/product/iotexplorer
移动开发产品：https://cloud.tencent.com/product/mobapp
存储产品：https://cloud.tencent.com/product/cos
区块链产品：https://cloud.tencent.com/product/baas
元宇宙产品：https://cloud.tencent.com/product/tgus

相关搜索:找到相对于元素的鼠标位置如何获取相对于文档的固定位置元素的offsetTop 如何获取坐标相对于鼠标位置的位置？React Native get元素相对于父元素的位置 js 鼠标相对于当前元素的位置 jquery元素相对于鼠标指针的位置在wpf中获取窗口中元素的绝对位置如何使子元素相对于父元素的维度更小？js获取鼠标相对于屏幕的位置获取相对于UIElement的单击鼠标位置 GIMP 获取图层相对于图像的位置获取鼠标相对于图像限制的位置相对于某些任意元素的绝对位置根据不同子元素的值获取子元素获取相对于父元素的点击范围 js获取子元素的获取子元素的高度 js怎么找到子元素的位置我如何获得子元素的位置 js如何获取元素的子元素

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JS算法探险之队列(Queue)

今天，我们继续探索JS算法相关的知识点。我们来谈谈关于队列Queue的相关知识点和具体的算法。

02

折叠屏 ③ | 华为资深专家解读折叠屏组合页面设计及多任务设计要求

组合页面设计是将原先两个或多个页面的内容，合并到一个新页面中以分栏或其他形式呈现出来，形成跨页面的交互，从而在适合的场景下构建出新的页面组合样式和新的用户体验。

03

再谈BOM和DOM(6):dom对象及event对象位值计算—如offsetX/Top,clentX

总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕，于是决定做个图来区分一下(画得我手那个酸呀。。。。)

02

一文彻底搞懂js中的位置计算

Element.scroll()方法是用于在给定的元素中滚动到某个特定坐标的Element 接口。

01

『Flutter』布局组件 Container、Row、Column、Stack

经过上一篇文章，开发出来了第二个 Flutter 程序，接下来是给大家详细的介绍下 Flutter 的布局组件。

03

用Javascript获取页面元素的位置

制作网页的过程中，你有时候需要知道某个元素在网页上的确切位置。下面的教程总结了Javascript在网页定位方面的相关知识。一、网页的大小和浏览器窗口的大小首先，要明确两个基本概念。一张网页的全部面积，就是它的大小。通常情况下，网页的大小由内容和CSS样式表决定。浏览器窗口的大小，则是指在浏览器窗口中看到的那部分网页面积，又叫做viewport（视口）。很显然，如果网页的内容能够在浏览器窗口中全部显示（也就是不出现滚动条），那么网页的大小和浏览器窗口的大小是相等的。如果不能全部显示，则滚动浏览器

07

前端基础-CSS定位

注意：偏移值准确的理解是“距离什么位置有多少像素” 。如 top:100px; 距离顶部为100像素（向下走）

02

JS 中的offset、scroll、client总结

经常碰到offset、scroll、client这几个关键字，每次都要各种实验，这里总结一下。

03

滚动视差？CSS不在话下

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为网页设计的热点趋势，越来越多的网站应用了这项技术。

02

滚动视差？CSS 不在话下

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为网页设计的热点趋势，越来越多的网站应用了这项技术。

03

滚动视差？CSS 不在话下

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为网页设计的热点趋势，越来越多的网站应用了这项技术。

08

scrollwidth和clientwidth_vue监听页面滚动

本文并非原创，只是真心觉得好，特别是图解的很到位，我在js中经常会用到，就记下来，与大家分享。

01

Element对象

Element是一个通用性非常强的基类，所有Document对象下的对象都继承自它，这个对象描述了所有相同种类的元素所普遍具有的方法和属性，一些接口继承自Element并且增加了一些额外功能的接口描述了具体的行为，例如HTMLElement接口是所有HTML元素的基本接口，而SVGElement接口是所有SVG元素的基础，大多数功能是在这个类的更深层级的接口中被进一步制定的。

04

前端进阶第8-9周打卡题目汇总

前端基础打卡已经基本结束了,内容从css基础,动画,js基本算法,作用域,闭包,节流防抖这些基本的web知识大家有没有都掌握了呢?年后会出一个进阶路线规划图,希望笔者可以带着大家,一起进步,一起成长.

04

前端-滚动视差？CSS 不在话下

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为网页设计的热点趋势，越来越多的网站应用了这项技术。

03

2019-08-23

1、console.log(["1", "3", "10"].map(parseInt))输出什么答案：[ 1, NaN, 2 ] 解答：

01

「深入浅出」java集合Collection和Map

集合有以下几个特点: ①集合只能存放对象。比如你存一个 int 型数据 1放入集合中，其实它是自动转换成 Integer 类后存入的。 ②集合存放的是对象的引用，对象本身还是放在堆内存中。 ③集合可以存放不同类型，不限数量的数据类型。

05

Hive的基本知识(三)Hive中的函数大全

针对内置的函数，可以根据函数的应用类型进行归纳分类，比如：数值类型函数、日期类型函数、字符

02

Java 集合基础入门，看这篇就够了

java.util.Collection 是进行单对象保存的最大父接口，即每次利用 Collection 接口都只能保存一个对象信息。定义如下：

02

Window对象

window作为全局变量，代表了脚本正在运行的窗口，将属性与方法暴露给JavaScript。

02

JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth「建议收藏」

在我本地测试当中：在IE、FireFox、Opera下都可以使用 document.body.clientWidth document.body.clientHeight 即可获得，很简单，很方便。而在公司项目当中： Opera仍然使用 document.body.clientWidth document.body.clientHeight 可是IE和FireFox则使用 document.documentElement.clientWidth document.documentElement.clientHeight 原来是W3C的标准在作怪啊

02

常见面试题六之java系列

做Android开发最重要的是要有一个很好的java基础。所以在我们的面试过程中也会被经常问到有关java的问题，其实在小编看来，如果java基础不好，那开发起Android来，怎一个累字了得。我记得小编在大二的时候，刚接触Android，那是java基础相当不好，做起来那个费劲都不用说，所以害的我重新又好好研读和学习了一遍java，之后，做起Android来简直就是顺风顺水。其实现在很多培训机构出来的学员，之所以做Android困难，就是因为时间太短，java的底子没有打好。好了，说了这么多，言归正传，今

06

web前端页面布局学习

Web前端杂记学习链接https://www.bilibili.com/video/av75501761?p=2 默认未设置定位父元素宽度最大填充父元素，高度正好容纳子元素。如果子元素左浮动，

03

直接激光雷达里程计：基于稠密点云的快速定位

文章：Direct LiDAR Odometry:Fast Localization with Dense Point Clouds

03

向Zepto学习关于"偏移"的那些事

根据文章内容总结的摘要

08

scrollWidth,clientWidth,offsetWidth的区别

网页可见区域宽：document.body.clientWidth; 网页可见区域高：document.body.clientHeight; 网页可见区域高：document.body.offsetWeight: 网页可见区域高：document.body.offsetHeight; 网页正文全文宽：document.body.scrollWidth; 网页正文全文高：document.body.scrollHeight; 网页被卷去的高：document.body.scrollTop; 网页被卷去的左：document.body.scrollLeft; 网页正文部分上：window.screenTop; 网页正文部分左：window.screenLeft; 屏幕分辨率的高：window.screen.height; 屏幕分辨率的宽：window.screen.width; 屏幕可用工作区高度：window.screen.availHeight; 屏幕可用工作区宽度：window.screen.availWidth;

02

向Zepto学习关于"偏移"的那些事

title: 向Zepto学习关于偏移的那些事 date: 2017-12-10 23:06:15

02

Hive的基本知识(三)Hive中的函数大全

针对内置的函数，可以根据函数的应用类型进行归纳分类，比如：数值类型函数、日期类型函数、字符

02

CSS中定位的介绍及使用

静态定位是默认值，就是之前认识的标准流。代码：postion:static 静态定位不能通过方向偏移值来改变。

02

css中的定位属性有哪些

定位属性是CSS中用于控制元素在文档中位置的关键属性。它主要用于确定元素相对于其父元素或其他元素的位置。

01

HTML中document的作用,html中的document对象是什么？一篇文章让你了解document对象

本篇文章主要的介绍了关于HTML document对象的解释，还有关于HTML document对象的使用实例解析，接下来让我们一起来看这篇文章吧

01

定位(position)

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。

03

IFRAME属性及详解

标签属性属性描述 ALIGN align 设置或获取表格排列。 ALLOWTRANSPARENCY allowTransparency 设置或获取对象是否可为透明。 APPLICATION APPLICATION 表明对象的内容是否为 HTML 应用程序(HTA)，以便免除浏览器安全模式。 ATOMICSELECTION 指定元素及其内容是否可以一不可见单位统一选择。 ACCELERATOR accelerator 设置或获取表明对象是否包含快捷键的字符串。 BEGIN begin 设置或获取时间线在该元素上播放前的延迟时间。 BORDER border 设置或获取框架间的空间，包括 3D 边框。 background-attachment backgroundAttachment 设置或获取背景图像如何附加到文档内的对象中。 background-color backgroundColor 设置或获取对象内容后的颜色。 background-position-x backgroundPositionX 设置或获取 backgroundPosition 属性的 x 坐标。 background-position-y backgroundPositionY 设置或获取 backgroundPosition 属性的 y 坐标。 behavior behavior 设置或获取 DHTML 行为的位置。 border-bottom borderBottom 设置或获取对象下边框的属性。 border-bottom-color borderBottomColor 设置或获取对象下边框的颜色。 border-bottom-style borderBottomStyle 设置或获取对象下边框的样式。 border-bottom-width borderBottomWidth 设置或获取对象下边框的宽度。 border-color borderColor 设置或获取对象的边框颜色。 border-left borderLeft 设置或获取对象左边框的属性。 border-left-color borderLeftColor 设置或获取对象左边框的颜色。 border-left-style borderLeftStyle 设置或获取对象左边框的样式。 border-left-width borderLeftWidth 设置或获取对象左边框的宽度。 border-right borderRight 设置或获取对象右边框的属性。 border-right-color borderRightColor 设置或获取对象右边框的颜色。 border-right-style borderRightStyle 设置或获取对象右边框的样式。 border-right-width borderRightWidth 设置或获取对象右边框的宽度。 border-style borderStyle 设置或获取对象上下左右边框的样式。 border-top borderTop 设置或获取对象上边框的属性。 border-top-color borderTopColor 设置或获取对象上边框的颜色。 border-top-style borderTopStyle 设置或获取对象上边框的样式。 border-top-width borderTopWidth 设置或获取对象上边框的宽度。 border-width borderWidth 设置或获取对象上下左右边框的宽度。 bottom bottom 设置或获取对象相对于文档层次中下个定位对象的底部的位置。 canHaveChildren 获取表明对象是否可以包含子对象的值。 canHaveHTML 获取表明对象是否可以包含丰富的 HTML 标签的值。 CLASS className 设置或获取对象的类。 contentWindow 获取指定的 frame 或 iframe 的 window 对象。 clear clear 设置或获取对象是否允许在其左侧、右侧或两边放置浮动对象，以防下段文本显示在浮动对象上。 clip clip 设置或获取定位对象的哪个部分可见。 cursor cursor 设置或获取当鼠标指针指向对象时所使用的鼠标指针。 display display 设置或获取对象是否要渲染。 DATAFLD dataFld 设置或获取由 dataSrc 属性指定的绑定到指定对象的给定数据源的字段。 DATASRC dataSrc 设置或获取用于数据绑定的数据源。 disabled 获取表明用户是否可与该对象交互的值。 END end 设置或获取表明元素结束时间的值，或者元素设置为重复的简单持续终止时间。 firstC

02

vivo悟空活动中台-基于行为预设的动态布局方案

作为前端工程师，页面布局是基本功。面对悟空中台的海量的活动需求，仅仅有几招常规的布局套路显然是难以招架的，悟空开发者团队从个性化需求中提炼特定场景下的共性特点，设计了多个“创意布局”方案。

01

Android layout属性大全

第一类：属性值 true或者 false android:layout_centerHrizontal 水平居中　　 android:layout_centerVertical 垂直居中 android:layout_centerInparent 相对于父元素完全居中　　 android:layout_alignParentBottom 贴紧父元素的下边缘　　 android:layout_alignParentLeft 贴紧父元素的左边缘　　 and

09

jQuery知识总结(最全最精美)

使用: <script src="jquery-3.5.1/jquery-3.3.1.min.js"></script> 注意: 如果<script> 在body前面,应该使用 jQuery独有的预加载 $(function(){ 这里写代码 }) jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。选择器: 所有选择器 * 标签选择器标签名 ID选择器 #id 类选择器 .

02

CSS-定位(position)

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。

01

Threejs入门之二十二：Threejs中的屏幕坐标转标准设备坐标

在上一节中，我们在监听鼠标移动事件时，将其坐标范围处理为了[-1,1]的范围，使用如下代码

01

怎么自动登录公司客户端系统、导出数据？ | Power Automate实战案例

前面的文章《怎么自动登录公司系统、导出数据？| Power Automate实战案例》里，主要讲的是登录网页版的公司系统导出数据，但有很多公司的系统可能是CS架构的，即用户使用的是一个安装在本地的客户端，比如SAP的GUI（读“龟”，个人觉得真好听……），还有金蝶、用友等某些ERP系统客户端，等等。

07

JDK1.9-List集合

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

03

Java 集合框架（1）---- 概述

一转眼就到 6 月了，还有一个月左右这学期就结束了，想着这学期结束就得去找实习了。。。时间过的好快，突然想起《许多年以后》中的一句歌词：时间过的好快不会再重来。大学生活就剩最后一年了，之后就得变成上班族了，还是要好好珍惜和利用剩余的大学时光。

03

【CSS】定位 ③ ( 绝对定位 | 父容器有定位相对于父容器定位 | 父容器没有定位相对于浏览器进行定位 )

上述父容器的定位不一定是绝对定位 , 其它类型的定位也可以 , 在本博客的示例中 , 使用的就是相对定位 ;

02

13 Java 集合

Java 集合定义了两种基本的数据结构，一种是 Collection，表示一组对象的集合；另一种是Map，表示对象间的一系列映射或关联关系。Java 集合的基本架构如下图。

02

List集合和其子类ArrayList、LinkedList

我们掌握了 Collection接口的使用后，再来看看Collection接口中的子类，他们都具备那些特性呢？

01

jQuery源码解析之position()

使用：直接调用$().position()即可，该方法没有 arguments（参数对象）

01

逆透视变换IPM模型

在解释自适应的IPM模型之前，首先需要了解使用相机的物理参数来描述IPM的基本模型[1]（这篇文章虽然有点古老，但是从数学层面上阐述了IPM的数学模型）下图展示了相机坐标系，图像坐标系，以及世界坐标系之间的关系，其中（u,v）是像素单位，(r,c)和（X,Y,Z）是米制单位。

02

CSS定位特性

CSS属性书写顺序布局定位属性：display / position / float / clear / visibility / overflow 自身属性：width / height / margin / padding / border / background 文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break 其他属性：content / cursor /border-r

04

Css 详细解读定位属性 position 以及参数

position 定位属性，是CSS中非常重要的属性。除了文档流布局，就是定位布局了。本来我对这个问题没有放在心上，毕竟写了这么多年的css，对position的各类使用是烂熟于心的。但是今天突然发现，居然很多人都不清楚position参数。因此，特地写这篇博文，详细解读一下position 以及参数。

01

前端之HTML和CSS

HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。

03

从零开始学 Web 之 CSS3（一）CSS3概述，选择器

CSS3是CSS（层叠样式表）技术的升级版本，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭