offset、client和scroll

offset

offsetWidth:获取元素的可视宽度,包括元素的边框(border),水平padding,垂直滚动条宽度,元素本身宽度;

offsetHeight:获取元素的可视高度,包括元素的边框(border),垂直padding,水平滚动条高度,元素本身高度;

(类似于jQuery中的outerWidth()和outerHeight()方法)

offsetLeft:获取对象元素边界的左上角顶点相对于offsetParent的左上角顶点的水平偏移量;

offsetTop:获取对象元素边界的左上角顶点相对于offsetParent的左上角顶点的垂直偏移量;

(类似于jQuery中的position()方法返回的对象的top,left属性)

如果offsetParent是body,此属性在不同浏览器中有差异:

IE8/9/10及Chrome中,offsetLeft = (body的margin-left) + (body的border-width) + (body的padding-left) + (元素本身的margin-left);

在FireFox中,offsetLeft = (body的margin-left) + (body的padding-left) + (当前元素的margin-left)。

如果offsetParent不是body,此属性一致:

offsetLeft=(offsetParent的padding-left) + (中间元素的offsetWidth) + (当前元素的margin-left);

offsetTop=(offsetParent的padding-top) + (中间元素的offsetHeight) + (当前元素的margin-top)。

offsetParent返回一个距离调用offsetParent的元素最近的并且定位过的祖先元素的引用。 如果祖先元素都未定位, 则offsetParent返回根元素的引用。

scroll

scrollWidth:获取元素的滚动宽度;

scrollHeigh:获取元素的滚动高度;

scrollLeft:获取或设置对象左边界和窗口中可见内容的最左端之间的距离;

scrollTop:获取或设置对象上边界和窗口中可见内容的最顶端之间的距离。

document.body.scrollTop: 网页被卷去的高度;

document.body.scrollLeft: 网页被卷去的宽度;

client

document.documentElement.clientWidth:浏览器视口的宽度(兼容);

document.documentElement.clientHeight:浏览器视口的高度(兼容);

event.clientX:触发事件的位置相对于文档的水平座标(类似于jQuery中的event.pageX);

event.clientY:触发事件的位置相对于文档的垂直座标(类似于jQuery中的event.pageY);

event.offsetX:触发事件的位置相对于容器的水平坐标;

event.offsetY:触发事件的位置相对于容器的垂直坐标。

 

时间: 2024-08-11 00:40:53

offset、client和scroll的相关文章

offset、client、scroll开头的属性归纳总结

HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent  第二组:clientWidth,clientHeight,clientLeft,clientTop 第三组:scrollWidth,scrollHeight,scrollLeft,scrollTop 详细定义如下: 1.1

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的offset,client,scroll的区别

javascript的offset.client.scroll在使用过程中非常频繁,接下来将对此进行一一介绍,了解其区别和使用方法. offsetTop 指元素距离上方或上层控件的位置,整型,单位像素.  offsetLeft 指元素距离左方或上层控件的位置,整型,单位像素.  offsetWidth 指元素控件自身的宽度,整型,单位像素.  offsetHeight 指元素控件自身的高度,整型,单位像素.  网页可见区域宽:document.body.clientWidth  网页可见区域高:

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).选

offset,client,scroll的学习记录

offset系列属性 offsetTop是相对于已经定位的最近的父元素的距离,包括父元素的border , 如果没有定位父元素 ,则此时父元素是body offsetWidth 是div的左右padding+width offsetHeight 是div的上下padding+height client clientHeight是不包括边框的高度 clientWidth是不包括边框的宽度 clientTop是上边框的宽度 clientLeft是左边框的宽度 scroll scrollWidth是包

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 三大系列

1.offset   只能获取,不能赋值 (1)元素.offsetParent   //返回当前元素最近的定位父元素 console.log (son.offsetParent) (2)元素.offsetLeft     //返回offsetParent的左偏移量 console.log (son.offsetLeft) (3)元素.offsetTop      //返回offsetParent的上偏移量 console.log (son.offsetTop) (4)元素.offsetWidth

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

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

scroll offset & client总结

oEvent.clientX 是指鼠标到可视区左边框的距离. oEvent.clientY 是指鼠标到可视区上边框的距离. clientWidth  是指可视区的宽度. clientHeight  是指可视区的高度. clientLeft  是指左边框的宽度. clientTop  是指上边框的宽度. 获取可视区的宽高: document.documentElement.clientWidth document.documentElement.clientHeight offsetWidth