scroll offset & client总结

oEvent.clientX 是指鼠标到可视区左边框的距离。

oEvent.clientY 是指鼠标到可视区上边框的距离。


clientWidth  是指可视区的宽度。

clientHeight  是指可视区的高度。

clientLeft  是指左边框的宽度。

clientTop  是指上边框的宽度。

获取可视区的宽高:
　　document.documentElement.clientWidth
　　document.documentElement.clientHeight


offsetWidth  是指div的宽度（包括div的边框）

offsetHeight  是指div的高度（包括div的边框）

offsetLeft  是指div到整个页面左边框的距离（不包括div的边框）

offsetTop  是指div到整个页面上边框的距离（不包括div的边框）

scrollTop  是指可视区顶部边框与整个页面上部边框的看不到的区域。

scrollLeft  是指可视区左边边框与整个页面左边边框的看不到的区域。

scrollWidth  是指左边看不到的区域加可视区加右边看不到的区域即整个页面的宽度（包括边框）

scrollHeight  是指上边看不到的区域加可视区加右边看不到的区域即整个页面的高度（包括边框）

向上滚动的距离scollTop的兼容性写法：
　　document.documentElement.scrollTop || document.body.scrollTop

时间： 2024-10-23 12:14:30

scroll offset & client总结的相关文章

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

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

JavaScript中的 offset, client,scroll

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

JSjs进阶--之JS三大家族：offset家族 Scroll家族 client家族

1.1  三大家族和一个事件对象 三大家族(offset/scroll/client) 事件对象/event   (事件被触动时,鼠标和键盘的状态)(通过属性控制) 1.2  Offset家族简介 offset这个单词本身是--偏移,补偿,位移的意思. js中有一套方便的获取元素尺寸的办法就是offset家族: offsetWidth和offsetHight以及offsetLeft和offsetTop以及offsetParent 共同组成了offset家族. 1.2.1  offsetWidth

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经常用

JS 中的 offset、scroll、client

---恢复内容开始--- offset的使用 css部分 *{ margin:0; padding: 0 } #offset{ width: 100px; height:100px; padding:20px; background: red; margin-top:30px; } #fixed{ position: absolute; right:100px; top:200px; width: 200px; height: 200px; background: black; } html部分

javascript三大家族：offset属性 scroll属性 client属性

(1)offset属性:1.1 offsetWidth = width + border + padding1.2 offsetHeight = height + border + padding1.3 offsetTop = 元素相对于浏览器顶部的距离1.4 offsetLeft = 元素相对于浏览器左边的距离功能:只读(获取)不写(设置)1.5 子元素的offsetTop和offsetLeft:关键看父元素是否设置了定位,若有则相对于父元素的上边框和左边框的距离:若没有则相对于浏览器顶部和左

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

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

JavaScript元素位置与距离：client&scroll&offset&MouseEvent&滚动条宽度计算

client: clientWidth/clientHeight: 元素内部的宽度/高度,仅包含包含content和padding,不包含滚动条 clientWidth = content width + padding - scrollbar Width clientHeight = content Height + padding - scrollbar Height clientLeft/clientTop: 元素的左border宽度,当文字方向为右至左且出现滚动条时(direction: