原生JS获取left/top值

最新推荐文章于 2024-08-16 10:18:34 发布
最新推荐文章于 2024-08-16 10:18:34 发布
阅读量761 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wyb15594982127/article/details/84628130
版权

首先，要获取left/top值的该元素必须有   position：absolute；属性

  obj.style.left；可以但不建议，此方法只能取到行内样式的left/top值，style标签及link引入的样式都读取不到

  建议使用 obj.offsetleft；去获取

追上明天的脚步
关注
原生js获取left值和top值的三种方法
10-19
以下将详细介绍三种原生JavaScript获取`left`和`top`值的方法。 ### 第一种方法：直接通过`style`属性 这种方法最直观，直接通过元素的`style`属性来获取`left`和`top`值。语法如下： ```javascript var ...
原生JS获取元素的位置与尺寸实现方法
10-19
掌握如何使用原生JS来获取这些信息对于进行诸如页面布局调整、动画制作、响应式设计等任务至关重要。 1. 内部尺寸：在获取元素的尺寸时，我们通常关注的是元素的内部尺寸，即内容框（content box）的尺寸。它包括...
JS中以及JQ中如何发生滚动事件以及获取滚动的Top值
weixin_44017778的博客
06-07 327
JS： 创建： 标签节点：document.createElement("标签节点名称") 文本节点：document.createTextNode("文本节点值") 删除： 自删除：哪一个DOM元素对象.remove(); 通过父节点删除：哪一个父节点对象.removeChild(哪一个子节点) 追加： 哪一个父节点对象.appendChild(哪一个子节点) 克隆： 哪一个节点.cloneNode([true]) 如果添加true--克隆标签以及内容；没有true默认只克
原生JS中如何获取CSS属性中的值
热门推荐
mwtopfire的博客
07-25 1万+
css文件中如何得到某个属性值： 一、getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值，返回的是一个CSS样式声明对象 ， 只读， 此方法支持Firefox浏览器; 语法：var style=window。getComputedStyle(“元素”，“伪类”);第一个参数是必须的，第二个为可选的。 二、currentStyle 是一款可以兼容IE浏览器的属
javascript字符串left
最新发布
weixin_40461219的博客
08-16 45
我整理的一些关于【CRI】的项目学习资料（附讲解～～）和大家一起分享、学习一下：https://d.51cto.com/xltfov教你如何实现 JavaScript 字符串 Left 功能 在编程中，处理字符串是一个常见的任务。而在 JavaScript 中，有时我们需要一个“Left”功能，也就是从字符串的左边提取指...
js获取top和left
xiangZHANG110的专栏
07-20 4495
js获取top值有三种方法获取，下面分别来讲一下 1.直接获取  obj.style.top   ，但很多时候取出来是个空的，原因是这种方法只能获取行间样式设置的，用style写在外面的和link进来的并不能获取到，所以很多时候得到的是个空 2. 只读的方法  可以获取所有style样式，存在兼容性问题，在标准浏览器中可以通过window.getComputedStyle(对象，null).l...
js获取元素的left和top值方法总结
XYYxyy55
02-16 2287
方法一： 使用obj.style.left和obj.style.top 该方法获取到的样式可读可写 但是这种方法有局限性，仅能获取行内样式中的left，right。 如果写在了style标签里，或者link引入的css文件中，则获取不到 方法二： 使用window.getComputedStyle 该方法接收两个参数 第一个参数是，要获取样式的元素 第二个是可选参数，要匹配的伪元素的字符串 ...
IE9下，原生JS设置元素left和top属性为数值不生效
weixin_33725807的博客
04-13 906
为什么80%的码农都做不了架构师？>>> ...
原生js操作dom实现上下左右移动.docx
11-23
"原生js操作dom实现上下左右移动" 本文将详细讲解如何使用原生JavaScript操作DOM实现上下左右移动的功能。首先，我们需要了解什么是DOM，以及如何使用JavaScript来操作DOM。 DOM（Document Object Model，文档对象...
原生js点击按钮改变盒子的left值使盒子移动
u010234868的专栏
08-16 3598
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box { width: 100px; height: 100px; background-color: pink; position: relative; /*右移位置改变脱离文档流*/ } .
具有绝对定位的标签元素使用原生js获取其left，top的值
weixin_38409093的博客
10-10 3074
1直接通过obj.style.left和obj.style.top，但是有局限性，这种获取的方法只能获取到行内样式的left和top的属性值，不能获取到style标签和link 外部引用的left和top属性值。 2使用obj.offsetLeft来获取对象的left属性值,用obj.offsetTop来获取对象的top属性值。
获取position的top、left
re_raise的博客
08-26 973
JavaScript中，某标签设置position属性，获取/修改其top、left值 str.value.top=a; str.value.left=b; //str表示设置了position属性的元素 ie中可以使用，Chrome中不行
[转]js checkBrowser
weixin_30727835的博客
10-13 236
[转]js checkBrowser <script type= "text/javascript " language= "javascript "> <!-- function checkBrowser() { var ClientInfo= " "; ClientInfo = ClientInfo...
原生 javascript 获取 left 和 top 值
weixin_44698457的博客
02-28 320
方法一 object.style.left || object.style.top , 这种方法只能获取到行内式样式的 left 和 top 值，不能获取到 style 标签内和 link 标签引入的 top 和 left 属性值。 方法二 可以获取所有style样式，存在兼容性问题，在标准浏览器中可以通过window.getComputedStyle(对象，null).left 方法来获取元素...
原生JS获取元素属性值
qq_43659178的博客
07-10 1473
第一步 我们要获取到元素（比如用ID），不可以是类数组（比如用class），类数组除了有一些数组的基本特征不可以使用其他方法，你会报错的 第二步 目标元素必须设置position为absolute属性 第三步 方法一：obj.style.left 此方法只能获取到元素的行内样式left，使用前在行内设置它的样式，可读可写 方法二：window.getConutedStyle(对象,null).left 只读，此方法存在兼容性问题，IE9以下版本不支持，欧朋浏览器基本支持，伪类元素不支持，微软在IE提供另一个
js：获得窗口可见高，滚动高，top值
weixin_43517190的博客
11-30 808
//获得窗口可见高winHeight function findDimensions(){ var winHeight1=0,winHeight2=0,winHeight3=0,winHeight4=0; if(window.innerWidth){winHeight1=window.innerHeight;} if(document.body){if(document.body.clie...
JavaScript获取元素尺寸与大小：原生方法全面解析
这个方法返回元素相对于视口的位置和尺寸，包括`top`, `right`, `bottom`, `left`, `width`和`height`属性。它是获取元素精确位置和大小的最全面的方法，不受滚动影响。 总结： 在JavaScript中获取元素尺寸和位置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值