offsetWidth、clientWidth、scrollWidth 的区别

	offsetWidth	clientWidth	scrollWidth
相同之处	都是返回元素大小
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.clientWidth	返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.scrollWidth	返回自身实际的宽度，不含边框，返回数值不带单位

主要用法：

offset系列经常用于获得元素位置 offsetleft offsetTop
client经常用于获取元素大小 clientWidth clientHeight
scroll经常用于获取滚动距离 scrolTop scrollLeft

注意页面滚动的距离通过 window . pageYOffset 获得

offsetWidth、clientWidth、scrollWidth 的区别相关推荐

js获取屏幕尺寸、clientWidth、offsetWidth、scrollWidth等区别
js获取元素/屏幕宽高总结如下 1.获取网页可视区域宽高(随着页面的缩放,所获取的值会相应改变) 方法一.不包括滚动条的宽高在内 document.documentElement.clientWid ...
screenWidth、clientWidth、offsetWidth、 scrollWidth的区别
在做移动端开发的时候,我们会需要用到屏幕的宽度,根据不同屏幕的宽度写交互代码. 有那么多种宽度,我们应该用哪个呢?它们有什么区别呢? document.body.clientWidth:可见区域宽. ...
JS中的位置和宽度：clientWidth、offsetWidth、scrollWidth等区别
首先定义一个div. 然后稍微装修一下下面开始区分一.clientWidth和clientHeigh . clientTop和clientLeft 1,clientWidth的实际宽度 clien ...
JS中的offsetWidth, clientWidth, scrollWidth, innerWidth, outerWidth, pageXOffset
value description offsetWidth 返回元素的宽度(包括元素宽度.内边距和边框,不包括外边距) offsetHeight 返回元素的高度(包括元素高度.内边距和边框,不包括外边 ...
offsetwidth/clientwidth的区别
offsetwidth/clientwidth的区别 clientWidth是对象看到的宽度(不含边线,即border) scrollWidth是对象实际内容的宽度(若无padding,那就是边框之间 ...
四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异...
转自http://blog.163.com/chudaozhe@126/blog/static/1157323432011626112137928/ 网页可见区域宽:document.body.cli ...
JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth
常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.b ...
各种边距clientWidth、offsetWidth、scrollWidth、clientLeft、getBoundingClientRect详解
1.clientWidth.offsetWidth.scrollWidth <!DOCTYPE html> <html><head><meta charset ...
offsetWidth和width的区别逻辑中断 delete运算符。。。。
offsetWidth和width的区别: 1.offsetWidth属性可以返回对象的padding+border+widt属性值之和,style.width返回值就是定义的对象的width属性值. ...

offsetWidth、clientWidth、scrollWidth 的区别

offsetWidth、clientWidth、scrollWidth 的区别相关推荐

最新文章

热门文章