element.offsetLeft/Top  获取元素相对于最近的有定位的父元素的坐标，如果没有有定位的父元素，则是文档坐标

element.scrollTop/Left 获取元素滚动卷去的距离

element.offsetWidth/Height 获取元素的宽度高度（包含边框）

element.clientWidth/Height 获取元素的宽度高度（不包含边框）

element.scrollWidth/Height 获取元素的内容宽度高度（包括被卷曲的部分）

e.pageX/Y 获取鼠标的文档坐标（相对于文档而言）

e.clientX/Y 获取鼠标的视口坐标（相对于视口而言）

e.screenX/Y 获取鼠标的屏幕坐标（相对于整个浏览器而言）

window.pageY/XOfffset 获取页面的滚动距离

论DOM中文档和元素的位置大小属性及其区别的更多相关文章

  1. 在解析XML时要注意解析元素和解析标签属性的区别

    解析元素时: Sting str = ele.elementText("name"); 而解析标签属性时: String key = ele.attributeValue(&quo ...

  2. 怎样理解window对象的几组位置大小属性

    第一组: window.screenX 和 window.screenY, 只读, 返回浏览器窗口左上角与屏幕左上角的水平距离和垂直距离(单位像素); 第二组: window.innerHeight ...

  3. Javascript 强制浏览器渲染Dom文档

    在Cordova+Framework7开发Hybrid App时,在iPhone 7上遇到一个诡异的现象(Chrome浏览器.Android都正常):js修改手风琴中的input文本框的值后,但页面仍 ...

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

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

  5. vue 组件传递值以及获取DOM元素的位置信息

    1.父组件 select_li.vue 1.1 父组件模板 <template> <div id='selectLi' ref="selectLi"> &l ...

  6. dom 页面位置和大小，元素的位置和大小，鼠标位置

    dom里面三种跟位置相关的元素 页面位置和大小,元素的位置和大小,鼠标位置 ①window:位置(position):(screenLeft, screenTop) [(screenX, screen ...

  7. 认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构（节点树）。

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  8. 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素

    1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...

  9. JavaScript : DOM文档解析详解

    JavaScript DOM  文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...

随机推荐

  1. MyBatis智能标签！

    if 语句 <select id="getOne" resultType="com.mybatis.entity.SmbmsProviderEntity" ...

  2. 【Beta】Scrum meeting 6

    目录 写在前面 进度情况 任务进度表 Beta-1阶段燃尽图 遇到的困难 照片 commit记录截图 小程序前端仓库 后端代码仓库 技术博客 写在前面 例会时间:5.10 22:30-22:50 例会 ...

  3. c++字符串输入格式总结

    最近的几次笔试中,常常遇到一些输入的问题.下面说明一下几种情况. 1. 第一种就是常见的,输入数字序列,用空格分隔开,直到回车结束.这个之前一开始遇到的时候都是利用getline直接作为字符读入一行处 ...

  4. idea2017打war包

    i 然后就可以把war放到服务器上目录了.

  5. [web] 前端一些细节

    作者:水落斜阳链接:https://www.jianshu.com/p/7a8124fdf945来源:简书著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 1, reflow和re ...

  6. centos上传命令

    首先安装lrzsz # yum -y install lrzsz 1.上传文件,执行命令rz,会跳出文件选择窗口,选择好文件,点击确认即可. # rz 运行rz命令后弹出选择文件窗口,找到要上传的文件 ...

  7. Twitter雪花算法SnowFlake算法的java实现

    https://juejin.im/post/5c75132f51882562276c5065 package javaDemo; /** * twitter的snowflake算法 -- java实 ...

  8. UICachedDeviceRGBColor CGImage]: unrecognized selector sent to instance 0xxxxxxxxxxx'

    UICachedDeviceRGBColor CGImage]: unrecognized selector sent to instance 0xxxxxxxxxxx' 报错原因是 本来应该写空间的 ...

  9. leetcode 968. Binary Tree Cameras

    968. Binary Tree Cameras 思路:如果子节点只能覆盖到父节点.当前节点,但是父节点可以覆盖到他的父节点.子节点.当前节点,所以从叶子节点往上考虑 0代表子节点没有被覆盖 1代表子 ...

  10. ES6 - 函数扩展（函数参数默认值）

    函数参数默认值 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log(x, y); ...