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. 《Genius》

    Einstein is genius.         爱因斯坦是天才,这是一个毫无疑问的命题.他在专利局空闲之余写下的相对论,可以让我们学习很久一段时间,而且还不一定能学懂. 这部十集的电视连续剧是 ...

  2. [BUAA软工]Alpha阶段测试报告

    测试报告 一．测试计划 1.1 功能测试 1.2 UI测试 1.3 测试中发现的bug https://github.com/bingduoduo1/backend/issues/21 https:/ ...

  3. Self-Supervised Representation Learning

    Self-Supervised Representation Learning 2019-11-11 21:12:14  This blog is copied from: https://lilia ...

  4. patchUpload.vue?5e29:406 Uncaught (in promise) DOMException: Failed to execute 'readAsArrayBuffer' on 'FileReader': The object is already busy reading Blobs.

    patchUpload.vue?5e29:406 Uncaught (in promise) DOMException: Failed to execute 'readAsArrayBuffer' o ...

  5. response.redirect 正在中止线程

    问题描述:正在中止线程问题原因:Response.End 方法终止页的执行,并将此执行切换到应用程序的事件管线中的 Application_EndRequest 事件.不执行 Response.End ...

  6. MySQL Unknown table engine 'FEDERATED''

    Last_SQL_Error: Error 'Unknown table engine 'FEDERATED'' on query. 错误 解决过程: 1.查看当前支持的存储引擎    show en ...

  7. C# selenium 高级

    https://www.cnblogs.com/morang/p/7441091.html https://www.cnblogs.com/tobecrazy/p/4817946.html https ...

  8. New & make in go_Code

    概述 Go 语言中的 new 和 make 一直是新手比较容易混淆的东西,咋一看很相似.不过解释两者之间的不同也非常容易. 他们所做的事情,和应用的类型也不相同. 二者都是用来分配空间. new 函数 ...

  9. python工程设置工具（pipenv）

    原始安装 pip工具 --- 包安装工具, 可以从Python包索引hub上安装,也可以使用自定义的hub. 命令: pip install xxx 缺点: 1.命令方式, 一次只能安装一个包, 对于 ...

  10. Jmetal设置Solution Variables

    Jmetal设置Solution Variables 觉得有用的话,欢迎一起讨论相互学习~Follow Me 首先每个solution都必须使用Problemset初始化 ProblemSet pro ...