【彻底搞清楚DOM元素的height,offsetHeight,clientHeight,scrollHeight】的更多相关文章

彻底搞清楚DOM元素的height,offsetHeight,clientHeight,scrollHeight

测试用例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible&quo…

关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究

我是以chrome浏览器做的研究. 先看一段代码: <script> window.addEventListener('DOMContentLoaded',function(){ var node1 = document.querySelector('#father'); var node2 = document.querySelector('#child'); console.log('offsetTop==offsetHeight==scrollTop==scrollHeight==cli…

[DOM基础]offsetHeight,clientHeight,scrollHeight,innerHeight,outerHeight等属性的解释

由于经常搞混这几个属性,所以查找资料总结一下,方便以后翻出来温习. 一.偏移量-以offset开头的 1.offsetHeight:元素在垂直方向上占用的空间大小,像素.包括元素的高度.可见的水平滚动条的高度.上边框高度和下边框高度. 2.offsetWidth:同上,水平上占用的空间. 3.offsetLeft:元素的左外边框至包含元素的左内边框的距离. 4.offsetTop:同上,上部的距离. 包含元素的引用保存在offsetParent属性中,不一定是parentNode,比如<td>…

offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别

这些高度相信很多同学都搞不清楚吧.这里我通过本地测试,发现了区别. 以聊天窗口为例. 元素(class='content')高度444px,其中上下padding分别是10px,margin为0.距离最近的一个定位的父元素的上边距是60px. 这里,在控制台打印出各个高度值: var c =document.getElementsByClassName('content')[0]; console.log(c.offsetTop,c.offsetHeight,c.clientHeight,c.s…

offsetHeight,clientHeight,scrollHeight,offsetY等属性的理解

el.offsetHeight = height + padding + border(滚动条是在边框内的,自然也包括在内) el.clientHeight = 可视化看到的高度 (就是content的高度) el.scrollHeight = 整个元素的高度 ( 包括了clientHeight看不到的那部分,一般就是你css设置的元素高度) el.offsetTop = 子元素的外边框到父元素的内边框的垂直距离 (没边框时自然就是content到content的距离) el.offsetLef…

JavaScript获取DOM元素位置和尺寸大小

  在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript代码,我们需要了解一些基本知识. 基础概念 为了方便理解,我们需要了解几个基础概念,每个HTML元素都有下列属性 offsetWidth clientWidth scrollWidth offsetHeight clientHeight scrollHeight offsetLeft clien…

获取DOM元素位置和尺寸大小

JavaScript获取DOM元素位置和尺寸大小 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript代码,我们需要了解一些基本知识. 基础概念 为了方便理解,我们需要了解几个基础概念,每个HTML元素都有下列属性 offsetWidth clientWidth scrollWidth offsetHeight clientHeight scroll…

jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offsetTop.scrollTop 概念一直都很模糊,借此写个demo看看. 举例看看 jquery 对象的 height.innerHeight.outerHeight 几个区别: <%@ page language="java" import="java.util.*&quo…

第一百一十七节，JavaScript，DOM元素尺寸和位置

学习要点: 1.获取元素CSS大小 2.获取元素实际大小 3.获取元素周边大小 本章,我们主要讨论一下页面中的某一个元素它的各种大小和各种位置的计算方式,以便更好的理解. 一．获取元素CSS大小 1.通过style内联获取元素的大小 //<div id="box" style="background-color: #2616ff;width: 200px;height: 200px;">测试1</div> window.onload = fu…

height、clientHeight、offsetHeight、scrollHeight、height()、 innerHeight()、outerHeight()等的区别

1.height height是css属性,这个属性定义元素内容区的高度,在内容区外面可以增加内边距.边框和外边距. 当  box-sizing: content-box 时,高度应用到元素的内容框. 当  box-sizing:border-box时,高度包含了内容框.内边距和边框. 2.clientHeight Element.clientHeight只读属性是没有的CSS或内联布局框元素为零,否则它的像素单元内的高度,但不包括填充水平滚动条的高度,边界或边缘. // 包含元素的conten…