【scrollWidth、clientWidth 和 offsetWidth】的更多相关文章

scrollWidth,clientWidth与offsetWidth的区别

scrollWidth  是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度). clientWidth  是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变.  offsetWidth  是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变. 一个scrollWidth和clientWidth的例子:  <html>  <head>  <title>77.htm文件</title>  </hea…

【clientX，offsetX，screenX】 【scrollWidth，clientWidth，offsetWidth】的区别

一.深刻认识clientX,offsetX,screenX 概念(来源于网络): clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条. offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标. offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标. screenX 设置或获取获取鼠标指针位置相对于用…

页面元素坐标和偏移（clientX/pageX/screenX/layerX/offsetWidth/scrollWidth/clientWidth等）相关整理

鼠标事件都是在特定位置发生的,我们可以通过event事件对象的各种属性来获得事件发生的坐标位置,有相对于视口的,有相对于整个文档的,同样页面元素的位置也有相对视口的,也有滚动后的,这些都比较容易混淆,所以整理在这里,备忘,待查. 1.客户区坐标位置(clientX/clientY) 我们可以通过event事件对象的clientX/clientY属性获得事件发生时鼠标指针在视口中的水平和垂直坐标. 示意图: 2.屏幕坐标位置(screenX/scrennY) 通过event事件对象的screenX…

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:…

scrollWidth,clientWidth,offsetWidth的区别

  通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变. 该demo就在页面中放一个textarea元素,采用默认宽高显示. 情况1: 元素内无内容或者内容不超过可视区,滚动不出现或不可用的情况下. scrollWidt…

四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异

网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的高) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scr…

clientWidth、offsetWidth和scrollWidth的区分

scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变. 情况1: 元素内无内容或者内容不超过可视区,滚动不出现或不可用的情况下. scrollWidth=clientWidth,两者皆为内容可视区的宽度. offsetWidth为元素的实际宽度. 情况2: 元素的内容超…

web前端学习笔记---scrollWidth,clientWidth,offsetWidth的区别

通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变. 该demo就在页面中放一个textarea元素,采用默认宽高显示. 情况1: 元素内无内容或者内容不超过可视区,滚动不出现或不可用的情况下. scrollWidth=…

元素间距属性（scrollLeft,scrollWidth,clientWidth,offsetWidth,padding,margin）

scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置offsetTop:获取对象相对于版面或由…

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解

HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度…