offset系列、client系列、scroll系列】的更多相关文章

HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent  第二组:clientWidth,clientHeight,clientLeft,clientTop 第三组:scrollWidth,scrollHeight,scrollLeft,scrollTop 详细定义如下: 1.1…
1.元素偏移量  offset 系列 1.1 offset 就是偏移量,使用 offset 系列相关属性可以 动态 得到该元素的位置(偏移).大小等. 注意: 1.获得元素距离带有定位父元素的位置 2.获得元素自身的大小(宽度和高度) 3.返回的数值都不带单位 1.2 offset 系列常用属性(元素以带有定位的父亲为准,如果没有父亲,或者父亲没有定位,则以 body 为准) element.offsetTop    返回元素相对带有定位父元素上方的偏移 element.offsetLeft …
一些属性和方法,在dom中没有规定如何确定页面中元素大小的情况下诞生... 1.偏移量(offset dimension) 测试代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>offset偏移量学习</title> <meta name="author" content="郭菊锋/702004176@…
body是DOM对象里的body子节点,即 <body> 标签: documentElement 是整个节点树的根节点root,即<html> 标签: window.screen.width.window.screen.height.screen.width.screen.height分别表示显示屏幕的宽高,即屏幕的分辨率. window.innerHeight.window.innerWidth分别表示浏览器展示页面内容可见的高度和宽度. window.outerHeight.w…
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAHuCAYAAABpm/53AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjw…
这三个是是js盒模型属性 client clientWidth 内容宽度加上左右padding clientHeight 内容高度加上上下padding clientTop 上边框的宽度 clientLeft 左边框的宽度 offSet offSetWidth 内容宽度加左右padding加左右border offSetHeight 内容高度加上下padding加上下border offSetLeft IE9+和高级浏览器和IE6/7 指的是元素自身的左边框外部到offsetparent左边框左…
下面这三组是关于元素大小.位置相关的属性 一.offset 偏移量 1.offsetParent 该属性获取距离当前元素最近的定位父元素,如果没有定位父元素此时是 body 元素 2.offsetLeft / offsetTop 该属性获取当前元素距离 offsetParent 的横向偏移和纵向偏移 3.offsetWidth / offsetHeight 该属性获取当前元素的宽高,宽高包括:内容(content).边框(border)和内填充(padding) 注意:offset 属性 是只读…
offset家族 自己的,用于获取元素自身尺寸 offsetWidth 和 offsetHeight 获取元素自身的宽度和高度,包括内容+边框+内边距 offsetLeft 和 offsetTop 距离第一个有定位的父级盒子和左边距和上边距 [父级盒子必须要有定位,如果没有,最终以body为准] offsetParent 返回当前对象的带有定位的父级盒子,[可能是父亲.也可能是爷爷],如果没有定位,最终返回body scroll家族 document.body.scrollWidth 获取网页宽…
offsetParent <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- offset demension 偏移量 定位父级 offsetParent 如果没有定位 找body offsetLeft offsetTop offsetHeight offset…
1.offsetTop 功能:获取元素上外缘与最近的定位父元素内壁的距离,如果没有定位父元素,则是与文档上内壁的距离 使用方法:js document.querySelector(...).offsetTop 返回数字类型 只读 注解:边缘:border以外 定位父元素:position为relative,absolute或fixed 内壁:border以内 1.1 style.top 功能:与offsetTop相同 使用方法:js document.querySelector(...).sty…