• 快解说网
    • 云文案网
    • 中国网赚之家
    • 文案屋

    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电脑浏览器[*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,自己检测的結果值是包括下拉列表的,但在网上的实例教程和有关文本文档都说不包括下拉列表,尽管下拉列表的总宽并不大,对总体危害都不显著,但如果有佛门**有精确回答的,还请鼎力相助,随手留个言,感谢!


    未经允许不得转载! 作者:访客,转载或复制请以超链接形式并注明出处x36交易网

    原文地址:https://www.x36.cn/post/3161.html发布于:2020-12-13