原生js--元素尺寸、位置和溢出
判断元素尺寸和位置的方法:
elem.getBoundingClientRect() // 已验证IE7+、firefox、chrome均支持此方法
该方法返回一个对象(坐标值为视口坐标,不是文档坐标):
{
left : 16,(左上角X轴坐标) // IE7返回值有差异
right : 16,(右下角X轴坐标) // IE7返回值有差异
top : 16,(左上角Y轴坐标) // IE7返回值有差异
bottom : 16,(右下角Y轴坐标) // IE7返回值有差异
width : 16,(元素宽度) // IE8及其以下版本无此属性
height : 16(元素高度) // IE8及其以下版本无此属性
}
如果想要获得文档坐标,需要加上滚动条的滚动距离
判断某个元素在某点:
document.elementFromPoint( x, y ) // x,y视口坐标
返回那个点的最里面和最上面的元素
不常用,因为鼠标事件为通过event来得到鼠标所在位置的元素
滚动文档的方法:
1、window.scrollTop( y ) // y 文档纵坐标
2、window.scrollTo() // x, y 文档横坐标和纵坐标
3、window.scrollBy( num, num ) // 相对于当前,横坐标和纵坐标各滚动多少像素
4、elem.scrollIntoView( bool ) // bool为true按元素上边缘定位到视口的上边缘,为false按元素的下边缘到视口的下边缘
原生js--元素尺寸、位置和溢出的更多相关文章
- 原生JS元素怎么取消事件
关于原生JS元素怎么取消事件,有3种方式 常规方法:removeEventListener 案例: <body> <div id="myDIV"> div ...
- 原生JS中获取位置的方案总结
获取鼠标当前位置 clientY.clientX: 鼠标当前位置 相对于 浏览器可视区域顶部.浏览器可视区域左部 的位置: pageY.pageX: 鼠标当前位置 相对于 文档顶部.文档左部的位置: ...
- 原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名
1)关于 pageX, clienX,offsetX,layerX pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位 ...
- 原生js和jquey获取窗口宽高,滚动条,鼠标位置总结
JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度 alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height( ...
- 深入学习jQuery元素尺寸和位置操作
× 目录 [1]尺寸设置 [2]位置设置 前面的话 对于javascript来说,元素尺寸有scroll.offset.client三大属性,以及一个强大的getBoundingClientRect( ...
- JS中关于位置和尺寸的api
HTMLElement.offsetParent 由于offsetTop 和 offsetLeft 都是相对于 offsetParent 内边距边界的,故offsetParent的意义十分重大.off ...
- DOM元素的位置、尺寸及更多的信息
一.基本概念 document.documentElement是整个DOM树的根节点,对应的元素就是html.下面将其称作根元素或根节点. document.body,对应的元素是body 二.浏览器 ...
- html通过css,js实现div悬浮效果总汇,如原生JS实现滚动到一定位置实现div悬浮
在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...
- 原生JS实现分页效果2.0(新增了上一页和下一页,添加当前元素样式)
虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...
随机推荐
- com.ibm.msg.client.jms.DetailedJMSSecurityException: JMSWMQ2013: 为队列管理器提供的安全性认证无效
com.ibm.msg.client.jms.DetailedJMSSecurityException: JMSWMQ2013: 为队列管理器“zm_queue_manager”提供的安全性认证无效, ...
- Blender下各种坐标系
转载:https://jingyan.baidu.com/article/ed2a5d1f8f018309f7be1779.html 打开blender创建一个立方体. 切换到“自身”坐标系,旋转 ...
- IP冲突解决方案
客人在我所供职的酒店上网的时候,经常会弹出一个对话框,显示一些提示,如上网的注意事项和消费标准等信息;并且有自己的电影和歌曲服务器,DHCP-server也是其中的一台服务器,宾馆.酒店就是用这台机器 ...
- iview 下拉刷新loadTop报错解决
<div class="noData" v-if="lifeList.length==0"> <img src="../assets ...
- iview框架select默认选择一个option的值
给select加v-model,绑定的值为默认要显示的option的value值,展示的则为option的标签之间的内容,并且如果option的value是双引号,这里绑定的值也要双引号,否则不能正常 ...
- ABBYY FineReader 14助力2017,正式进入新纪元
ABBYY FineReader 12自2014年推出以来,已经给万千用户的工作带来了便捷,蝉联优秀殊荣这么久,相信不少用户早在期待新版本的到来了吧.这不,ABBYY FineReader 14问世了 ...
- Ubuntu中的“资源管理器”System Monitor
我们在Windows中经常要查看“资源管理器”来了解系统运行情况,对进程进行操作等等... 在Windows桌面任务栏右键“启动任务管理器”: 学习Linux,自然也希望有类似的“资源管理器”,安装完 ...
- QT基础:QT 定时器学习
定时器在编程中经常要用到,有必要学习一下,记记笔记! Qt中定时器的使用有两种方法,一种是使用QObject类提供的定时器,还有一种就是使用QTimer类. 1.QObject中的定时器的使用,需要用 ...
- oracle 产生随机数
-- 产生一个任意大小的随机数select dbms_random.random from dual; -- 产生一个100以内的随机数select abs(mod(dbms_random.rando ...
- js获取图片原始大小
摘要: 浏览器中显示的图片大小未必是他真实的高和宽,比如像下面这样,我们给他加上宽和高的样式 <img src="IE.png" style="width:25px ...