javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法

关于js中的offsetWidth、clientWidth、scrollWidth等一系列属性及其方法一直都傻傻分不清，这里就来总结一下这些方法的用法和含义。

注意：下面元素属性和元素方法都通过 elem.属性 或 elem.方法 的方式使用，window属性通过 window.属性 的方式使用，document属性则通过document调用。

<script>/******* 元素视图属性* offsetWidth 水平方向 width + 左右padding + 左右border-width* offsetHeight 垂直方向 height + 上下padding + 上下border-width* * clientWidth 水平方向 width + 左右padding* clientHeight 垂直方向 height + 上下padding* * offsetTop 获取当前元素到 定位父节点 的top方向的距离* offsetLeft 获取当前元素到 定位父节点 的left方向的距离* * scrollWidth 元素内容真实的宽度，内容不超出盒子高度时为盒子的clientWidth* scrollHeight 元素内容真实的高度，内容不超出盒子高度时为盒子的clientHeight* ****** 元素视图属性结束* ****** Window视图属性（低版本IE浏览器[<IE9]不支持） 【自测包含滚动条，但网络教程都说不包含？？？】* innerWidth 浏览器窗口可视区宽度（不包括浏览器控制台、菜单栏、工具栏） * innerHeight 浏览器窗口可视区高度（不包括浏览器控制台、菜单栏、工具栏）* ***** Window视图属性结束* ****** Document文档视图* （低版本IE的innerWidth、innerHeight的代替方案）* document.documentElement.clientWidth 浏览器窗口可视区宽度（不包括浏览器控制台、菜单栏、工具栏、滚动条）* document.documentElement.clientHeight 浏览器窗口可视区高度（不包括浏览器控制台、菜单栏、工具栏、滚动条）* * document.documentElement.offsetHeight 获取整个文档的高度（包含body的margin）* document.body.offsetHeight 获取整个文档的高度（不包含body的margin）* * document.documentElement.scrollTop 返回文档的滚动top方向的距离（当窗口发生滚动时值改变）* document.documentElement.scrollLeft 返回文档的滚动left方向的距离（当窗口发生滚动时值改变）****** Document文档视图结束* ****** 元素方法* 1. getBoundingClientRect() 获取元素到body*  bottom: 元素底边（包括border）到可视区最顶部的距离*  left: 元素最左边（不包括border）到可视区最左边的距离*  right: 元素最右边（包括border）到可视区最左边的距离*  top: 元素顶边（不包括border）到可视区最顶部的距离*  height: 元素的offsetHeight*  width: 元素的offsetWidth*  x: 元素左上角的x坐标 *  y: 元素左上角的y坐标 * * 2. scrollIntoView() 让元素滚动到可视区* * ***** 元素方法结束* */
</script>

上面属性中，关于 window.innerWidth 和 window.innerHeight，我自己测试的结果值是包含滚动条的，但网上的教程和相关文档都说不包括滚动条，虽然滚动条的宽度不大，对整体影响也不明显，但如果有道友有准确答案的，还请不吝赐教，顺手留个言，谢谢！

javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法相关推荐

html游戏禁止微信浏览器下拉,JavaScript中防止微信浏览器被整体拖动的方法
在微信网页开发中,我使用的页面结构是在body下的container覆盖全屏,container下有个header和page的容器,page负责显示所有内容并实现滚动. 结构如图: 但是遇到了一个问题 ...
JavaScript中带有示例的Math.log10（）方法
JavaScript | Math.log10()方法 (JavaScript | Math.log10() Method) Math operations in JavaScript are han ...
javascript中对一个对象数组按照对象某个属性进行排序
在javascript中,对象和数组是两种不同的类型,这和php中的数组概念不同.在javascript中,也有一些精妙的算法,用来对一些对象进行排序.我在面试迅雷的时候,也拿到一道题,当时做题的时候 ...
JavaScript中带有示例的Math.abs（）方法
JavaScript | Math.abs()方法 (JavaScript | Math.abs() Method) Math operations in JavaScript are handled ...
JavaScript中带示例的String repeat（）方法
JavaScript | 字符串repeat()方法 (JavaScript | String repeat() Method) The String.repeat() method in JavaS ...
JavaScript中的innerHTML，innerHTML，value属性
一,innerHTML innerHTML在javaScript中具有双向功能,一是可以从指定的元素对象中获取内容,二是可以把自定义内容插入到指定的元素对象中去. 定义和用法: innerHTML属性 ...
JavaScript中绑定事件监听函数的通用方法[ addEvent() ]
上篇文章讲到了事件绑定的3中常用方法:传统绑定.W3C绑定方法.IE绑定方法.但是,在实际开发中对于我们来讲重要的是需要一个通用的.跨浏览器的绑定方法.如果我们在互联网上搜索一下会发现许多方法,一下是 ...
html页面获取元素,JavaScript中获取HTML元素值的三种方法
JavaScript中取得元素的方法有三种:分别是: 1.getElementById() 方法:通过id取得HTML元素. 2.getElementsByName()方法:通过name取得元素,是一 ...
php nodename,JavaScript中nodeName nodeType nodeValue这三个属性分析
JavaScript中,存在有nodeName .nodeType. nodeValue这三个属性的区别理解了这几个概念以后操作文档tree就比较容易上手 nodeName 刚学的时候我以为就是代表 ...

javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法

javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法相关推荐

最新文章

热门文章