js中offsetHeight,clientHeight等属性

最新推荐文章于 2024-09-11 11:10:43 发布

¼ÇÒä°ß²µµÄ»ØÒä

最新推荐文章于 2024-09-11 11:10:43 发布

阅读量184

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_35500925/article/details/104987335

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

    /**
     * 元素的属性：
     * 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: 浏览器窗口可视区高度（不包括浏览器控制台、菜单栏、工具栏）
     *
     * 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方向的距离（当窗口发生滚动时值改变） 
     *
     * 元素方法
     * 1. getBoundingClientRect() 获取元素到body
     *  bottom: 元素底边（包括border）到可视区最顶部的距离
     *  left: 元素最左边（不包括border）到可视区最左边的距离
     *  right: 元素最右边（包括border）到可视区最左边的距离
     *  top: 元素顶边（不包括border）到可视区最顶部的距离
     *  height: 元素的offsetHeight
     *  width: 元素的offsetWidth
     *  x: 元素左上角的x坐标 
     *  y: 元素左上角的y坐标 
     * 
     * 2. scrollIntoView() 让元素滚动到可视区
     * 
    */