使用html元素的getBoundingClientRect来获取dom元素的时时位置和大小

使用：

var section = $(‘.section‘)；这是jquery包装的dom元素，其他前端框架返回的可能也是一个包装元素，我们需要获得的是里面的html的dom元素

然后：section[0]：获得html的dom元素

然后：使用section[0].getBoundingClientRect来获取该元素的时时位置和大小

时间： 2024-08-05 23:01:32

使用html元素的getBoundingClientRect来获取dom元素的时时位置和大小的相关文章

获取DOM元素位置和尺寸大小

JavaScript获取DOM元素位置和尺寸大小在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript代码,我们需要了解一些基本知识. 基础概念为了方便理解,我们需要了解几个基础概念,每个HTML元素都有下列属性 offsetWidth clientWidth scrollWidth offsetHeight clientHeight scroll

JS中获取 DOM 元素的绝对位置实例详解

在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如本文左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度一文. 概述这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途文档标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien

getBoundingClientRect() 来获取页面元素的位置

一.样式: ? 1 2 3 4 <style> body,div{ margin:0; padding:0} .div-info{ width:200px; height:200px;border:1px solid #ccc; background:#f2f2f2; font:normal 12px/22px SimSun; position:absolute;top:200px; left:200px} </style> 二.js ? 1 2 3 4 5 6 7 8 9 10

getBoundingClientRect()来获取页面元素的位置”

getBoundingClientRect()来获取页面元素的位置” 获取的是一个对象; 延伸阅读; https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=403029188&idx=2&sn=1088e273b855b75815edb2e7977a0513&scene=0&key=710a5d99946419d988a823a3f76c4dabc336d68c1e192697aba3d5cdba0fce0f3d

通过class和id获取DOM元素的区别

1.通过id获取DOM元素的方法:document.getElementById("id名") 2.通过class获取DOM元素的方法:document.getElementsByClassName("class名") 从函数的名字可以知道,通过getElementsByClassName获取到的是一个数组,包括多个DOM元素,所以要执行DOM元素的方法,必须加一个索引,比如document.getElementsByClassName("class名&q

原生javascript获取dom元素简单介绍

原生javascript获取dom元素简单介绍: 使用jQuery可以各种方式获取元素,比如id选择器,类选择器,元素选择器等等,非常的方便. 下面就介绍一下如何利用原生的js实现获取dom元素的功能. 一.通过id获取元素: 最方便的那就是使用document.getElementById()函数. 具体可以参阅document.getElementById()一章节. 二.通过标签获取元素: 使用document.getElementsByTagName()函数. 具体可以参阅documen

Vue自定义指令获取DOM元素

我们知道,Vue.js的核心是数据驱动,当数据有所变化时,DOM就会被更新,比如: <span v-text="msg"></span> export default { data(){ return{ msg : 'oldMsg' } } methods : { changeMsg : function(){ this.msg = 'newMsg' } } } 当调用了changeMsg方法,msg被修改为 ' newMsg ' ,我们可以把这次修改理解为数据

获取DOM元素的三种方法

1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus?"> 6 <meta name="Author" content=""> 7 <me

JQuery动画——.trim()去空格、.get()和.index()获取DOM元素

.trim()去空格..get()和.index()获取DOM元素 1 .trim()函数用于去除字符串两端的空白字符,没有多余的参数用法 2 移除字符串开始和结尾处的所有换行符,空格(包括连续的空格)和制表符(tab),如果这些空白字符在字符串中间时,它们将被保留,不会被移除3 .get()获取DOM元素,通过已知的索引在合集中找到对应的元素4 get获取dom对象,通过document.getElementById获取的对象,从0开始索引,如找到第二元素,可以传递 $(a).