判断元素尺寸和位置的方法:

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--元素尺寸、位置和溢出的更多相关文章

  1. 原生JS元素怎么取消事件

    关于原生JS元素怎么取消事件,有3种方式 常规方法:removeEventListener 案例: <body> <div id="myDIV"> div ...

  2. 原生JS中获取位置的方案总结

    获取鼠标当前位置 clientY.clientX: 鼠标当前位置 相对于 浏览器可视区域顶部.浏览器可视区域左部 的位置: pageY.pageX: 鼠标当前位置 相对于 文档顶部.文档左部的位置: ...

  3. 原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名

    1)关于 pageX, clienX,offsetX,layerX pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位 ...

  4. 原生js和jquey获取窗口宽高,滚动条,鼠标位置总结

    JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度   alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height( ...

  5. 深入学习jQuery元素尺寸和位置操作

    × 目录 [1]尺寸设置 [2]位置设置 前面的话 对于javascript来说,元素尺寸有scroll.offset.client三大属性,以及一个强大的getBoundingClientRect( ...

  6. JS中关于位置和尺寸的api

    HTMLElement.offsetParent 由于offsetTop 和 offsetLeft 都是相对于 offsetParent 内边距边界的,故offsetParent的意义十分重大.off ...

  7. DOM元素的位置、尺寸及更多的信息

    一.基本概念 document.documentElement是整个DOM树的根节点,对应的元素就是html.下面将其称作根元素或根节点. document.body,对应的元素是body 二.浏览器 ...

  8. html通过css,js实现div悬浮效果总汇,如原生JS实现滚动到一定位置实现div悬浮

    在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...

  9. 原生JS实现分页效果2.0(新增了上一页和下一页,添加当前元素样式)

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

随机推荐

  1. Keepalived + Nginx + Tomcat 的高可用负载均衡架构搭建

    Keepalived + Nginx + Tomcat 的高可用负载均衡架构搭建 Nginx 是一个高性能的 HTTP反向代理服务器 Keepalived 是一个基于VRRP协议来实现的LVS服务高可 ...

  2. SecureCRT同时发送命令到所有主机

    有时候我们需要在多台服务器上执行相同的命令,比如安装软件,复制,粘贴,删除等等,但一台一台的去操作工作量就太大了,我们可以借助SecureCRT这款客户端远程连接工具实现这样的要求! 相关阅读: 如何 ...

  3. 每天一个linux命令: /etc/group文件详解

    Linux /etc/group文件与/etc/passwd和/etc/shadow文件都是有关于系统管理员对用户和用户组管理时相关的文件.linux /etc/group文件是有关于系统管理员对用户 ...

  4. [mysql]ERROR 1364 (HY000): Field 'ssl_cipher' doesn't have a default value

    From: http://m.blog.csdn.net/blog/langkeziju/13511411 我的MySQL版本为5.6.14版本,是二进制包安装的(虽然是二进制包安装的,但是以下问题同 ...

  5. JAVA构造方法与方法是啥意思,方法重载方法覆盖俗谈

    构造函数跟构造方法是一样的,只是称呼不同; C语言里叫函数,Java里叫方法. 成员方法必须有返回类型即使是没有返回,也要写上void 构造方法没有返回类型,而且和类名一样!一个类里面,一看就知道了譬 ...

  6. eclipse .setting下各文件详解

    Eclipse项目中系统文件介绍 一. 写在前面 文章较长,可以直接到感兴趣的段落,或者直接关键字搜索: 请原谅作者掌握的编程语言少,这里只研究Java相关的项目: 每一个文件仅仅做一个常见内容的简单 ...

  7. 给NSMutableArray添加copy属性就变成了NSArray

    -copy, as implemented by mutable Cocoa classes, always returns their immutable counterparts. Thus, w ...

  8. 关系型数据库 和 非关系型数据对比 以及 MySQL与Oracle对比

    一.关系型数据库 关系型数据库,是指采用了关系模型来组织数据的数据库.    关系模型1970年提出的,关系模型的概念得到了充分的发展并逐渐成为主流数据库结构的主流模型.    简单来说,关系模型指的 ...

  9. C#获取当前时区转换方法

    今天给Mongodb插入数据的时候发现,日期时间对不上,原来Mongodb(麻狗)默认是0时区,所以日期当然出错. 所以用下面进行转换就可以: log.AddTime = DateTime.Speci ...

  10. go interface介绍

    http://legendtkl.com/2017/06/12/understanding-golang-interface/      深入理解 Go Interface http://legend ...