当前位置:Gxlcms > JavaScript > js中元素的各种宽高图文详解

js中元素的各种宽高图文详解

时间:2021-07-01 10:21:17 帮助过:8人阅读

主要看这张图,感觉图的意思很清晰了

1.png

1.与client相关的宽高

  • clientWidth/clientHeight——元素的可视部分的宽度和高度,即padding+content,如果出现滚动条,则要减去相应滚动条的宽度。

    • 无padding无滚动条:clientWidth = style.width

    • 有padding无滚动条:clientWidth = style.width+style.padding*2

    • 有padding有滚动条,且滚动条是显示的:clientWidth = style.width+style.padding*2-滚动轴宽度

    • clientLeft/clientTop——元素周围边框的厚度,如果不指定一个边框或者不定位该元素,其值为0。

    • clientLeft = border-left的border-width

    • clientTop = border-top的border-width

2.与offset相关的宽高

  • offsetWidth/offsetHeight——border+padding+content。该属性和其内部的内容是否超出元素大小无关,只和本来设定的border及width和height有关。

    • 无padding无滚动条无border:offsetWidth = clientWidth = style.width

    • 有padding无滚动条有border:offsetWidth = style.width+style.padding*2+border宽度*2 = clientWidth+border宽度*2

    • 有padding有滚动条,且滚动条是显示的,有border:offsetWidth = style.width + style.padding * 2 + border宽度 * 2 = clientWidth + 滚动轴宽度 + border宽度*2

    • offsetLeft/offsetTop——与offsetParent有关,而且存在兼容

    • 如果当前元素的父级元素没有进行css定位(position为absolute或relative),offsetParent为body;如果当前元素的父级元素中有css定位(position为absolute或relative),offsetParent取最近的那个父级元素。

    • IE6/7:offsetLeft=(offsetParent的padding-left)+(当前元素的margin-left);

    • IE8/9/10及Chrome中:offsetLeft=(offsetParent的margin-left)+(offsetParent的border宽度)+(offsetParent的padding-left)+(当前元素的margin-left);

    • FireFox中:offsetLeft=(offsetParent的margin-left)+(offsetParent的padding-left)+(当前元素的margin-left);

3.与scroll相关的宽高——scrollWidth/scrollHeight——document.body的scrollWidth和scrollHeight与p的scrollWidth和scrollHeight是有区别的

  • body的scrollWidth和scrollHeight

    • 给定body宽高小于浏览器窗口:scrollWidth通常是浏览器窗口的宽度;scrollHeight通常是浏览器窗口的高度。

    • 给定body宽高大于浏览器窗口,且内容小于给定宽高:scrollWidth=给定的宽度 + padding + margin + border; scrollHeight = 给定的高度+padding+margin+border。

    • 给定body宽高大于浏览器窗口,且内容大于给定宽高:scrollWidth=内容宽度 + padding + margin + border; scrollHeight = 内容高度+padding+margin+border

    • p的scrollWidth和scrollHeight(火狐会把body当作p来处理)

    • 无滚动轴时:scrollWidth=clientWidth=style.width+style.padding*2。

    • 有滚动轴时:scrollWidth=实际内容的宽度 + padding*2; scrollHeight = 实际内容的高度+padding*2。

    • scrollLeft/scrollTop——可读写,卷起的高度

    相关推荐:

    js获取Html元素的实际宽度高度的方法

    获取一组元素的最大宽度或高度JavaScript代码

以上就是js中元素的各种宽高图文详解的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行