offset，client，scroll的学习记录

offset系列属性

　offsetTop是相对于已经定位的最近的父元素的距离，包括父元素的border ， 如果没有定位父元素 ，则此时父元素是body

　offsetWidth 是div的左右padding+width

　offsetHeight 是div的上下padding+height

　　client

　　　　clientHeight是不包括边框的高度

　　　　clientWidth是不包括边框的宽度

　　　　clientTop是上边框的宽度

　　　　clientLeft是左边框的宽度

　　

　　　scroll

　　　　　　scrollWidth是包括隐藏的内容的宽度

　　　　　　scrollHeight是包括隐藏的内容的高度

　　　　　　scrollTop是隐藏的内容的高度

　　　

　　　　

原文地址：https://www.cnblogs.com/lac759/p/10545070.html

时间： 2024-08-10 11:21:23

offset，client，scroll的学习记录的相关文章

JavaScript中的 offset, client,scroll

在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div.offsetLeft 指div距离左侧或上层控件的距离,单位像素 div.offsetWidth 指div 控件本身的宽度,单位像素 div.offsetHeight 指div 控件本身的高度,单位像素 混淆点 clientWidth 指对象看到的宽度,不包含border scrollWidth 是

js中的dom节点以及offset,client,scroll家族

一.节点. 1.父节点:parentNode; 2.兄弟节点: (1).下一个兄弟节点:nextElementSibling(在Ie中用nextSibling); (2).上一个兄弟节点:previousElementSibling(在Ie中用 previousSibling); 3.子节点: (1).选中第一个子节点:firstElementChild(在Ie中用firstChild); (2).选中最后一个子节点:lastElementChild(在ie中用lastChild); (3).选

js 元素offset,client , scroll 三大系列总结

1,element.offsetWidth : 包括 padding 和 边框 2,element.clientWidth : 包括 padding ,不包含边框 , 内容超出会溢出盒子的时候,就用scrollWidth 3,element.scrollWidth : 不包含边框 主要用法: 1,offset 系列 经常用于获得元素位置 offsetLeft  offsetTop 2,client经常用于获取元素大小, clientWidth , clientHeight 3,scroll经常用

offset client scroll pageXOffset属性，mouseover与mouseenter事件区别

offset 概述 使用 offset 系列属性可以动态得到该元素的位置(偏移),大小等 offset系列属性 说明(只读属性) ele.offsetTop 返回元素带有定位的父元素上方的偏移,父元素没有定位以body为准 ele.offsetLeft 返回元素带有定位的父元素左边的偏移,父元素没有定位以body为准 ele.offsetWidth 返回自身包括padding,边框,内容去的宽度 ele.offsetHeight 返回自身包括padding,边框,内容去的高度 ele.offse

js中 offset /client /scroll总结

offsetLeft offsetTop offsetWidth offsetHeight offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元素的边框和父容器的边框). offsetTop:同理是指元素的边框的外边缘距离与已定位的父容器(offsetparent)的上边距离(不包括元素的边框和父容器的边框). offsetWidth:描述元素外尺寸宽度,是指元素内容宽度+内边距宽度(左右两个)+边框(左右两个),不包括外边距和滚动条部分.

javascript中常用坐标属性offset、scroll、client

原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. 1.在文档(document)对象里面用: scrollWidth/Height:获取对象的滚动宽度(滚动条可以滚动的宽度,相当于整个页面的总宽度的样子--网页正文全宽) scrollLeft/Top:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离(页面利用滚动条滚动到右边时,隐藏在

4.client、offset、scroll系列

client.offset.scroll系列 他们的作用主要与计算盒模型.盒子的偏移量和滚动有关 clientTop 内容区域到边框顶部的距离 ,说白了,就是边框的高度 clientLeft 内容区域到边框左部的距离,说白了就是边框的乱度 clientWidth 内容区域+左右padding 可视宽度 clientHeight 内容区域+ 上下padding 可视高度 client演示 <!DOCTYPE html> <html> <head> <meta cha

java学习记录（2）：JMenuBar

1.在用这个时候发现很多的组件都有J的前缀,例如Button和JButton,前者是awt包的,后者是swing包的,两者耳朵区别是: AWT 是Abstract Window ToolKit (抽象窗口工具包)的缩写,这个工具包提供了一套与本地图形界面进行交互的接口.AWT 中的图形函数与操作系统所提供的图形函数之间有着一一对应的关系,我们把它称为peers. 也就是说,当我们利用 AWT 来构件图形用户界面的时候,我们实际上是在利用操作系统所提供的图形库.由于不同操作系统的图形库所提供的功能

ELK stack 学习记录

ELK日志分析平台学习记录 首先ELK主要指elasticsearch .logstash 和kibana,三个开源软件组合而成的一套日志平台解决方案.可以将平时收集到的日志,通过前台展示出来,并且可以加以分析,理论上可以解放劳动力(再也不用干上生产取日志这种活了--很搓). 最近在研究ELKstack日志分析平台,网上相关的中文资料不多.所以呢也就写了这篇文章将自己的一些学习认识总结记录下来,基本偏实战,概念理论较少,概念这块,我想以后可以再开一篇文章来做一个阐述总结. 这篇文章中会先讲一下搭