getBoundingClientRect用法

getBoundingClientRect()表示元素相对于视窗的集合，left、right、top、bottom(元素的位置)等属性

也可以得到元素的width和height

如： objRect = obj.getBoundingClientRect();

　　 left = objRect.left;

　　 right = objRect.right;

　　 top = objRect.top;

　　 bottom = objRect.bottom;

　　 width = right - left;

　　 height= bottom - top;

时间： 2024-10-17 16:01:08

getBoundingClientRect用法的相关文章

[原]js获取dom元素的实际位置及相对坐标

关键API: Element.getBoundingClientRect() mdn:https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect 用法: var rect = element.getBoundingClientRect(); console.log(rect.top, rect.right, rect.bottom, rect.left); 获取相对位置: var bodyRect

getBoundingClientRect的用法

getBoundingClientRect用于获取某个元素相对于视窗的位置集合.集合中有top, right, bottom, left等属性. 1.语法:这个方法没有参数. rectObject = object.getBoundingClientRect(); 2.返回值类型:TextRectangle对象,每个矩形具有四个整数性质( 上, 右 , 下,和左 )表示的坐标的矩形,以像素为单位. rectObject.top:元素上边到视窗上边的距离; rectObject.right:元素右

jquery中的each用法以及js中的each方法实现实例

each()方法能使DOM循环结构简洁,不容易出错.each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组.多维数组.DOM, JSON 等等在javaScript开发过程中使用$each可以大大的减轻我们的工作量. 下面提一下each的几种常用的用法 each处理一维数组 var arr1 = [ "aaa", "bbb", "ccc" ]; $.each(arr1, function(i,val){ alert(i); a

rem.js的用法及在浏览器端的适配

首先介绍下自己,我是从后端转前端,对于前端的见识还不深望各位全当一个新手自述....... 随着移动设配的更新换代,市场上涌现了大量的非主流设备分辨率,比如华为手机...... 更新换代快的大前提下自然又涌现出了适配问题,主流解决方案有很多,如响应式布局.cover布局.container布局这几种布局在大多数情况下不限制高度的页面下还是相当有用的,但如果被元素塞满的设计稿并且客户要求设计稿的每一个元素都能动起来,每1p只能占据一屏的情况下,用上述方法就会有一些问题,例如错位,例如变形....

React Hooks用法大全

前言在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们依赖于类组件来获取数据,处理数据,并向下传递参数给 UI 组件进行渲染.在我看来,使用 React Hooks 相比于从前的类组件有以下几点好处: 代码可读性更强,原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中,容易使开发者不利于维护和迭代,通过 React Hooks 可以将功能代码聚合,方便

js中获取时间new date()的用法

js中获取时间new date()的用法获取时间: var myDate = new Date();//获取系统当前时间获取特定格式的时间: 1 myDate.getYear(); //获取当前年份(2位) 2 myDate.getFullYear(); //获取完整的年份(4位,1970-????) 3 myDate.getMonth(); //获取当前月份(0-11,0代表1月) 4 myDate.getDate(); //获取当前日(1-31) 5 myDate.getDay();

20.5 Shell脚本中的逻辑判断；20.6 文件目录属性判断；20.7 if特殊用法；20.8 20.9 cace判断（上下）

扩展: select用法 http://www.apelearn.com/bbs/thread-7950-1-1.html 20.5 Shell脚本中的逻辑判断格式1:if 条件 ; then 语句; fi 1. 创建if1.sh测试脚本: [[email protected] ~]# vi if1.sh a=5,如果a大于3,满足这个条件,显示ok 添加内容: #!/bin/bash a=5 if [ $a -gt 3 ] then echo ok fi 2. 执行if1.sh脚本: [[e

20.1 Shell脚本介绍；20.2 Shell脚本结构和执行；20.3 date命令用法；20.4 Shell脚本中的变量

20.1 Shell脚本介绍 1. shell是一种脚本语言 aming_linux blog.lishiming.net 2. 可以使用逻辑判断.循环等语法 3. 可以自定义函数 4. shell是系统命令的集合 5. shell脚本可以实现自动化运维,能大大增加我们的运维效率 20.2 Shell脚本结构和执行 1. 开头(首行)需要加: #!/bin/bash 2. 以#开头的行作为解释说明: 3. 脚本的名字以.sh结尾,用于区分这是一个shell脚本 4. 执行.sh脚本方法有两种:

shell 中seq的用法 echo -n用法

用法:seq [选项]... 尾数或:seq [选项]... 首数尾数或:seq [选项]... 首数增量尾数从1循环到100的两种方法(bash 其它的shell没试过)for x in `seq 1 100`;do echo $x;donefor x in {1..100};do echo $x;done echo -n 不换行输出 $echo -n "123" $echo "456" 最终输出 123456 echo -e 处理特殊字符若字符串中