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

【关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究】的更多相关文章

关于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…

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…

彻底搞清楚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…

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

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

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

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

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…

offsetTop/offsetHeight scrollTop/scrollHeight 的区别

offsetTop/offsetHeight scrollTop/scrollHeight 这几个属性困扰了我N久,这次一定要搞定. 假设 obj 为某个 HTML 控件. obj.offsetTop obj距离上方或上层控件的位置,整型,单位像素. obj.offsetHeight obj自身的高度,整型,单位像素. offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,style.top 也是可以的,二者的区别是: 一.offsetTop 返回的是数字,而 st…

理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight

一.clientX和clientY 事件发生时,鼠标距离浏览器的可视区域的X.Y轴的位置,不包含滚动条的区域的部分.就算是页面进行了滚动,鼠标的坐标值还是参考可视区域的. 二.offsetLeft和offsetTop 事件源元素相对于父节点的偏移的像素值. 三.offsetWidth和offsetHeight 获取的是元素的宽度,包含border,padding,内容宽度,以及滚动条的宽度,和element.getBoundingClientRect()的值是一致的. 四.clientWidth…

搞懂offsetY、offsetTop、scrollTop、offsetHeight、scrollHeight

先搞offsetTop,最难懂的就是它了官方解释:返回当前元素的上边界到它的包含元素的上边界的偏移量,以像素为单位.这真TM坑爹啊!有木有!经过仔细研究查找得出结论:offsetTop是相对于离它最近的具有绝对或相对定位的父级元素的距离,有点绕口是不是?别急,咱慢慢剥开它...首先一定要明白offsetTop是一个相对值,那它到底是相对于谁的值呢,现在的女明星不都流行找干爹嘛,offsetTop也给自己找了一个,别人的要求是要有钱有权,而它的要求是要有position(只能是relative和…

offsetHeight, clientHeight与scrollHeight的区别

在网上搜了一下,结论非常笼统,讲IE从不讲版本,因此自己做了测试并上传结论.以下结论皆是在标准模式下测试通过的,没有测试quirk模式. clientHeight 大部分浏览器对 clientHeight 都没有什么异议,认为是元素可视区域的高度,也就是说元素或窗口中可以看到内容的这个区域的高度,即然是指可看到内容的区域,滚动条不算在内.但要注意padding是算在内.其计算方式为clientHeight = topPadding + bottomPadding+ height - 水平滚动…