获取元素距离屏幕的距离并添加样式

A孙大壮

已于 2022-02-11 09:26:47 修改

阅读量509

点赞数

文章标签：前端 javascript html

于 2022-02-10 16:06:03 首次发布

本文链接：https://blog.youkuaiyun.com/sunxiaobai1/article/details/122863124

版权

本文介绍如何利用DOM API快速定位元素并修改其CSS样式，包括使用querySelector选取元素并设置right属性，以及讲解了ele.offset系列方法在获取元素位置和尺寸上的便捷应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小例子

 document.querySelector("#w_fimg-1604538814255 .erweima").style.right
  = 
  document.querySelector("#w_grid-1599102165005").offsetLeft+130+'px'

修改HTML标签中的style属性

   div.style.color="white";//style.样式名=样式值;

快捷位置和尺寸

DOM已经提供给我们计算后的样式，但是还觉得不方便，所以DOM又提供给我们一些API：

ele.offsetLeft

ele.offsetTop

ele.offsetWidth

ele.offsetHeight

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

A孙大壮

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

js获取元素到屏幕左上角的距离

weixin_33863087的博客

10-23

1304

开发过程中经常会遇到获取元素到屏幕左上角的距离，当我们使用jQuery开发时，我们可以使用 $.offset()来获取准确的距离。如果我们的项目中并没有引入jQuer的话，跟希望通过原生方法实现，此时我们使用 offetLeft/offetTop 或者clientLift/clientTop 其实都不能准确的获取这个距离，这个时候最好就是看看jQ怎么写的，为什么它就能够准确的获取到呢？这就...

js之pc端网页特效，获取元素偏移，获取元素大小，offset和style区别以及案例

m0_61547956的博客

04-29

624

offsetLeft和offsetTop获取元素偏移 offset系列属性可以动态获得元素的位置，大小等，不需要我们去看css了，没有right和bottom。获得元素的距离以带有定位的父盒子为准，返回的数值不带单位，如果父盒子没有定位，就往上找，直到找到带有定位的父盒子，如果没有就以body为准。 offsetWidth和offsetHeight获取元素的大小返回的数值不带单位，包含padding和border值 offsetParent 返回带有定位的父盒子，parentNode是返

参与评论您还未登录，请先登录后发表或查看评论

如何获取元素的相对于屏幕的距离？

jx_2015_11_3的博客

09-15

5947

如何获取元素的相对于屏幕的距离？原生的js有一个函数getBoundingClientRect()<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>获取元素的相对于屏幕的距离</title> </head> <body> <div id="div"></div

【React】获取元素距离页面顶部的距离

最新发布

qq_45677671的博客

04-21

389

React 获取元素距离页面顶部的距离

JS 获取屏幕/浏览器/页面元素相对距离与宽高

曹定栓的博客

09-09

3980

JS获取系统屏幕信息 JS获取浏览器信息 JS获取页面信息 JS获取元素相对距离或位置

js 获取当前元素距离窗口的距离（getBoundingClientRect）

szl199107101035的博客

03-31

5642

含义：返回元素的大小及其相对于视口的位置。如下 let box = document.getElementById('box'); console.log(box.getBoundingClientRect()) 通过上图中的bottom、left、right、top获取元素距离窗口的距离 ps：1、得到的是相对于视图的距离，如果页面滚动距离也会发生变化 2、scrolltop和offsettop是相对于父元素而言的 ...

jquery获取元素到屏幕底的可视距离

weixin_33747129的博客

06-08

324

$(window).height();//是文档窗口高度 $("div").offset().top//是标签距离顶部高度 $(document).scrollTop();//是滚动条高度 $("div").height();//是标签高度转载于:https://www.cnblogs.com/hellman/p/6962989.html...

Vue获取页面元素的相对位置的方法示例

10-15

`handleScroll`方法计算元素距离顶部的距离（`elementRect.top`），并与滚动条的位置（`scrollTop`）进行比较，从而决定是否应用`isFixed`样式，实现元素的固定定位。总的来说，在Vue中获取页面元素的相对位置，...

js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法

10-23

在本文中，我们将会深入探讨如何利用JavaScript来控制页面元素的显示位置，使其固定在屏幕的某个特定位置，并且能够监听屏幕高度的变化，根据变化情况动态地调整元素的位置或样式属性。这一过程涉及到网页设计与前端...

JS判断指定dom元素是否在屏幕内的方法实例

10-20

本文将详细介绍如何使用JavaScript判断指定的DOM元素是否处于屏幕可视区域之内，并提供一个具体实现的实例。 ### 知识点一：DOM元素的可见性判断原理判断一个DOM元素是否可见，基本原理是利用浏览器窗口的滚动...

JQuery 将元素显示在屏幕的中央的代码

10-29

接着，通过`this.height()`和`this.width()`获取元素自身高度和宽度。然后计算出居中时元素应该具有的`top`和`left`值。这里的关键是将窗口的尺寸分别减去元素的尺寸，然后除以2，从而得到元素需要在窗口中偏移的...

table中加表单元素怎么验证_你可能不知道的HTML元素方法

weixin_32277761的博客

12-01

221

const tableEl = document.querySelector('table');const headRow = tableEl.createHead().insertRow();headerRow.insertCell().textContent = 'Make';headerRow.insertCell().textContent = 'Model';headerRow...

js怎么获取一个元素与屏幕右边的距离_js如何获取div（ul li）离屏幕上下左右边距离（长度）...

weixin_39622655的博客

12-21

4418

在网页中移到元素div(或 ul li)，常常需要获取元素div离屏幕上下左右的距离，这样可以知道元素处在屏幕中的位置，以控制元素的移动。获取元素div的长度或高度，可以用 js 获取元素div的width或height属性得到，但元素没有距离屏幕上下左右的属性，应该如何获取元素div(ul li)离屏幕上下左右边距离(长度)？javascript 有一个用 getBoundingClientRe...

js怎么获取一个元素与屏幕右边的距离_JS 宽高

weixin_42106357的博客

12-11

4426

页面宽高body宽高body.offsetHeight ：body总高度body.offsetWidth：body总宽度body.clientHeight ：body展示的高度；表示body在浏览器内显示的区域高度body.clientWidth ：body展示的宽度；表示body在浏览器内显示的区域宽度滚动条高度/宽度：如高度，可通过浏览器内页面可用高度 - body展示高度得出，即windo...

元素顶端到可见区域顶端的距离三种方法

smilelixiaojie的博客

08-17

5059

1、DOM元素有一个属性是offsetTop，表示该元素到父元素顶部的距离。所以最后的答案就是递归将所有的offsetTop加起来。 let a = document.querySelector(’.login_button’).offsetTop function getElementToPageTop(el) { if(el.parentElement) { return getElementToPageTop(el.parentElement) + el.offsetTop } return el.o

当页面元素出现在浏览器可视区域时才触发该动画样式

WebDestiny的博客

08-28

4711

原理：通过比较可视区域的高度 innerHeight与该元素近距离可视区域顶部的距离的大小关系来决定是否触发（类名的增加与删除）默认一个页面只能同时存在一个window.onscroll函数. 注意：具体的参数计算要根据自己的实际情况进行选取，而且最好将目标元素在控制台打印出来，到其原型链上寻找目标属性，避免出现null或者undefined即目标元素属性为空的情况案例：当目标元素滚动到可视...

获取标签到浏览器各种距离

lotte

08-13

1202

"就是滚动条距离顶部的位置（可变）： " document.documentElement.scrollTop ; "指滚动条距离左边的位置（可变）： " document.documentElement.scrollLef ; "网页可见区域宽： " document.body.clientWidth; "网页可见区域高： " document.body.clientHeight; "网...

vue获取元素距离顶部的距离_JS获取各种宽高

weixin_39784263的博客

11-29

6304

前提条件屏幕分辨率 1440 * 900 全屏下浏览器内部高度 1440 * 757 全屏下浏览器高度 860 （扣除底部工具栏）html / css * { margin: 0; padding: 0; border: 0; } .box { width: 300px; height: 150px; ...

js获取元素到可视区的距离/浏览器窗口滚动距离/元素距离浏览器顶部距离

qq_43682422的博客

03-23

7738

js获取元素到可视区的距离/浏览器窗口滚动距离/元素距离浏览器顶部距离

JavaScript实现DOM元素绝对位置获取方法

如果需要获取元素相对于文档的绝对位置，必须加上文档自身的滚动偏移量。这可以通过`window.pageXOffset`和`window.pageYOffset`来获取： ```javascript var absoluteTop = rect.top + window.pageYOffset; var ...