JavaScript DOM位置尺寸API

dinfer 发布于2019-08-23 12:51 / 414人阅读

摘要：我们需要了解几个基础概念，每个元素都有下列属性为了理解这些属性，我们需要知道元素的实际内容有可能比分配用来容纳内容的盒子更大，因此可能会出现滚动条，内容区域是视口，当实际内容比视口大的时候，需要把元素的滚动条位置考虑进去。

我们需要了解几个基础概念，每个HTML元素都有下列属性

offsetWidth      clientWidth     scrollWidth

offsetHeight     clientHeight    scrollHeight

offsetLeft       clientLeft      scrollLeft

offsetTop        clientTop       scrollTop

为了理解这些属性，我们需要知道HTML元素的实际内容有可能比分配用来容纳内容的盒子更大，因此可能会出现滚动条，内容区域是视口，当实际内容比视口大的时候，需要把元素的滚动条位置考虑进去。

clientHeight和clientWidth用于描述元素内尺寸，是指元素内容+内边距大小，不包括边框（IE下实际包括）、外边距、滚动条部分

offsetHeight和offsetWidth用于描述元素外尺寸，是指元素内容+内边距+边框，不包括外边距和滚动条部分

clientTop和clientLeft返回内边距的边缘和边框的外边缘之间的水平和垂直距离，也就是左，上边框宽度

offsetTop和offsetLeft表示该元素的左上角（边框外边缘）与已定位的父容器（offsetParent对象）左上角的距离

offsetParent对象是指元素最近的定位（relative,absolute）祖先元素，递归上溯，如果没有祖先元素是定位的话，会返回null

云服务器 GPU云服务器 javascript_dom_api dom元素位置 javascript dom javascript dom 编程艺术

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99046.html

JavaScript DOM位置尺寸API

摘要：我们需要了解几个基础概念，每个元素都有下列属性为了理解这些属性，我们需要知道元素的实际内容有可能比分配用来容纳内容的盒子更大，因此可能会出现滚动条，内容区域是视口，当实际内容比视口大的时候，需要把元素的滚动条位置考虑进去。我们需要了解几个基础概念，每个HTML元素都有下列属性 offsetWidth clientWidth scrollWidth offsetHe...

moven_j 2019-08-02 11:55 评论0 收藏0
高性能JavaScript阅读简记（二）

摘要：访问集合元素时使用局部变量对于任何类型的访问，如果对同一个属性或者方法访问多次，最好使用一个局部变量对此成员进行缓存。三、DOM Scripting DOM编程我们都知道对DOM操作的代价昂贵，这往往成为网页应用中的性能瓶颈。在解决这个问题之前，我们需要先知道什么是DOM，为什么他会很慢。 DOM in the Browser World 浏览器中的DOM DOM是一个独立于语言...

RaoMeng 2019-08-01 17:20 评论0 收藏0
高性能JavaScript阅读简记（二）

摘要：访问集合元素时使用局部变量对于任何类型的访问，如果对同一个属性或者方法访问多次，最好使用一个局部变量对此成员进行缓存。三、DOM Scripting DOM编程我们都知道对DOM操作的代价昂贵，这往往成为网页应用中的性能瓶颈。在解决这个问题之前，我们需要先知道什么是DOM，为什么他会很慢。 DOM in the Browser World 浏览器中的DOM DOM是一个独立于语言...

coolpail 2019-08-20 18:31 评论0 收藏0
你不知道的浏览器页面渲染机制

摘要：前言浏览器的内核是指支持浏览器运行的最核心的程序，分为两个部分的，一是渲染引擎，另一个是引擎。渲染引擎在不同的浏览器中也不是都相同的。接下来就是浏览器的渲染过程。布局完成后，浏览器会立即发出和事件，将渲染树转换成屏幕上的像素。前言浏览器的内核是指支持浏览器运行的最核心的程序，分为两个部分的，一是渲染引擎，另一个是JS引擎。渲染引擎在不同的浏览器中也不是都相同的。目前市面上常见的浏览...

zhunjiee 2019-08-23 16:50 评论0 收藏0