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

旧城等待， 2022-05-17 22:57 129阅读 0赞

关于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`， 我自己测试的结果值是包含滚动条的，但网上的教程和相关文档都说不包括滚动条，虽然滚动条的宽度不大，对整体影响也不明显，但如果有道友有准确答案的，还请不吝赐教，顺手留个言，谢谢！

发表评论取消回复

表情：

评论列表（有 0 条评论，129人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript中获取对象属性的不同方法

JavaScript中获取对象属性的不同方法文章目录 JavaScript中获取对象属性的不同方法一、点记法二、方括号记法三、Obj

女爷i/ 2023年10月15日 21:51/ 0 赞/ 61 阅读

相关 JavaScript中数组类型的属性和方法

　　除了Object，Array类型应该是ECMAScript中最常用的类型了。　　ECMAScript的数组虽然也是数据的有序列表，但还是与其他语言中的数组有很大的区别。

川长思鸟来/ 2023年08月17日 17:44/ 0 赞/ 132 阅读

相关 javascript中数组常用的方法和属性

前言在javascript中，数组是一种非常重要的数据类型，我们时常会和它打交道，最近在开发项目中频繁的使用到数组，但是自己对数组的众多方法已经是非常模糊了，为了方便

小鱼儿/ 2023年06月01日 12:55/ 0 赞/ 27 阅读

相关 HTML中img标签及相关属性

img标签及其相关属性，借用书中的一张图片即可说明一切。 ![这里写图片描述][20160516223949805] [20160516223949805]: /ima

浅浅的花香味﹌/ 2022年07月24日 07:13/ 0 赞/ 402 阅读

相关 JavaScript类属性及方法使用

function Person() \{ this.name=" 张三 "; // 定义一个属性 name this.sex=" 男 "; // 定义一个属性 s

﹏ヽ暗。殇╰゛Y/ 2022年06月17日 02:28/ 0 赞/ 222 阅读

相关 JavaScript中的数组对象属性和方法！

日常代码中经常会对代码进行一些操作，复制、排序、查找、遍历等等，一些数组的方法总是记不住，所以写篇日记总结一下。 1. 数组的创建与赋值创建一个数组，有三种方法。

秒速五厘米/ 2022年06月12日 14:24/ 0 赞/ 331 阅读

相关和属性相关的方法

<table> <tbody> <tr> <td><font>  面向对象面向君，不负代码不负卿。 ^o^ </font> </td> </t

Dear 丶/ 2022年06月09日 05:57/ 0 赞/ 193 阅读

相关 Android类的XML属性，相关方法及说明

Android类的XML属性，相关方法及说明 <table> <tbody> <tr> <td style="border-top:a3a3a3 1pt s

待我称王封你为后i/ 2022年06月06日 11:55/ 0 赞/ 207 阅读

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

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

旧城等待，/ 2022年05月17日 22:57/ 0 赞/ 130 阅读

相关 javascript数组的属性及方法总结

借鉴于:[http://www.w3school.com.cn/jsref/jsref\_obj\_array.asp][http_www.w3school.com.cn_js

小咪咪/ 2022年04月05日 15:40/ 0 赞/ 250 阅读