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. DDD 全称 “Domain-Driven Design”，领域驱动设计

    大型软件项目的最复杂之处不是实现,而是软件所服务的真正的领域. 领域驱动设计就是用来处理这些高度复杂领域的理想和途径,使得领域本身成为项目关注的焦点,从而达到维护能深刻反映领域的软件模型的目的. 通过 ...

  2. MySQL之replace函数应用

    replace函数,从字面上看其主要作用就是替换.实际它的作用确实是替换.那么替换有哪些应用场景呢?比如A表和B表有一个关联的字段就是id,但是在A中id是数字,在B中id也是数字,但是B中id多一个 ...

  3. 《微信小程序商城开发实战》笔者的新书，欢迎各位粉丝上京东购买

    作者图书京东链接,请点击------>>>    **微信小程序商城开发实战** 附京东真实评价截图: 编辑推荐 在当今移动互联网大潮中,微信应用凭借其庞大的用户基数和极强的用户黏性 ...

  4. 【C++】C++中的容器解析

    目录结构: contents structure [-] 顺序容器 顺序容器的种类 顺序容器的操作 容器操作可能使迭代器失效 Vector容器的增长机制 容器适配器 关联容器 关联容器的分类 关联容器 ...

  5. C++ std::map 屏蔽排序

    转载:https://blog.csdn.net/sendinn/article/details/96286849 最近在项目中用标准库中的关联性容器map,但知道map默认升序的,但在一个需求时又不 ...

  6. Postgresql单表【插入】/【更新】百万数据

    一.插入数据 说到插入数据,一开始就想到: insert int A values(*******************) 插入多条数据,最多想到:写成这样: insert into A value ...

  7. MyBatis踩坑之SQLProvider转义字符被删除问题

    目录 踩坑背景 问题描述 原因追踪 解决方案 方法一 方法二 踩坑背景 项目架构:Spring Boot + MyBatis + MySQL. 使用MyBatis作为ORM框架,jdbc驱动使用的是m ...

  8. 【转】简谈基于FPGA的千兆以太网

    原文地址: http://blog.chinaaet.com/luhui/p/5100052903 大家好,又到了学习时间了,学习使人快乐.今天我们来简单的聊一聊以太网,以太网在FPGA学习中属于比较 ...

  9. python结巴分词SEO的应用详解

    结巴分词在SEO中可以应用于分析/提取文章关键词.关键词归类.标题重写.文章伪原创等等方面,用处非常多.     具体结巴分词项目:https://github.com/fxsjy/jieba    ...

  10. python代码git上传

    python代码git上传 1.每次上传代码之前需要先拉取线上的代码 操作如下: