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. MySQL数据库中文乱码问题

    mysql> select * from books; +-----+---------------------------------+---------+-------------+---- ...

  2. jenkins使用--部署

    软件: centos 7.x java jenkins Pipeline ansible 1.安装请看上一文 2.主要是讲部署() 目的:实现 参数化发布 说明 :构建jar包是由gitlab-ci  ...

  3. mvel语法指南[翻译]

    mvel受到了java语法的启发,但是存在一些根本性的差异,mvel旨在使其成为更有效的表达式语言.比如直接支持集合.数组和字符串匹配,正则表达式的运算操作等. mvel2.x有以下几个部分组成:  ...

  4. Gevent简明教程

    Gevent简明教程  发表于 2015-11-28 |  分类于 技术| |  阅读次数 5159 前述 进程 线程 协程 异步 并发编程(不是并行)目前有四种方式:多进程.多线程.协程和异步. 多 ...

  5. Docker运行图形化程序

    原理 Docker支持图形化程序,是利用Linux的X11技术. 相关文章 如何在Docker容器中启动D-Bus 引文详情 如何在Docker容器中启动D-Bus 翻译自 https://georg ...

  6. spring boot整合H2数据库

    一.背景: .H2数据库是一个开源的关系型数据库.H2是一个嵌入式数据库引擎,采用java语言编写,不受 平台的限制,同时支持网络版和嵌入式版本,有比较好的兼容性,支持相当标准的sql标准,支持集群. ...

  7. linux命令详解之du命令

    du命令概述du命令作用是估计文件系统的磁盘已使用量,常用于查看文件或目录所占磁盘容量.du命令与df命令不同,df命令是统计磁盘使用情况,详见linux命令详解之df命令.du命令会直接到文件系统内 ...

  8. Windows上的那些效率神器，让你快到飞起

    转自:https://zhuanlan.zhihu.com/p/41771626 本文为Windows上有哪些让你效率倍增的软件和小技巧系列第二篇,上一篇请点击蓝字查看:打造高逼格PC,让你的电脑好用 ...

  9. Python 技术篇-pip版本查看和升级

    一.pip show pip查看pip版本,下面还提示安装命令和pip可以升级到的最新版本. 二.python -m pip install --upgrade pip升级我们的pip

  10. Maven依赖包导入错误（IntelliJ IDEA）：java.lang.OutOfMemoryError: GC overhead limit exceeded

    一.问题背景 最近用IntelliJ IDEA 打开一个老应用,一直加载依赖不成功,主POM中存在如下错误. java.lang.OutOfMemoryError:GC overhead limit ...