原生js—offsetWidth、screenWidth、clientWidth、innerWidth、outerWidth……各种宽高的理解

**

原生js—offsetWidth、screenWidth、clientWidth、innerWidth、outerWidth……各种宽高的理解

**

1.首先对 window对象 、 document对象做一个区别;
  • window :窗口(整个浏览器窗口),包含document;
  • document :整个HTML文档;
2.与 window 相关的宽、高:
  • window.innerWidth:整个浏览器窗口的宽度;
  • window.innerHeight:document起始(只是起始)到浏览器窗口底部的高度;
  • window.outerWidth:整个浏览器窗口的宽度;
  • window.outerHeight:整个浏览器窗口的高度;
3.与 window.screen 相关的宽、高:
  • window.screen.height:用户屏幕的高度;
  • window.screen.width:用户屏幕的宽度;
  • window.screen.availHeight:可利用的屏幕高度,与window.screen.height一样;
  • window.screen.availWidth:可利用的屏幕宽度,与window.screen.width一样;
  • window.screenTop:浏览器窗口到用户屏幕最上方的距离;
  • window.screenLeft:浏览器窗口到用户屏幕最左边的距离;
4.与 client、offset、scroll 相关的宽、高:
  • 与 client相关的宽高( 以body为例 )

    document.body.clientHeight:可视部分的高度,即padding + content;

    document.body.clientWidth:可视部分的宽度,即padding + content;

    注意:其他元素也有 clientWidthclientHeight,不仅仅是body;
    无padding、无滚动条时

    clientWidth == style.width;
    有padding、无滚动条时
    clientWidth == style.width + style.padding;
    有padding、有滚动时
    clientWidth == style.width + style.padding - 滚动条的宽度;
    clientHeight类似

    document.body.clientLeft:元素的 border-left 的大小,无border时,clientLeft === 0;

    document.body.clientTop:元素的 border-top 的大小,无border时,clientLeft === 0;

  • 与offset 相关的宽高( 以body为例 )

    document.body.offsetHeight:元素的 border + padding + content 的值(跟元素溢出无关) ;

    document.body.offsetWidth:元素的 border + padding + content 的值(跟元素溢出无关) ;

    注意:任何元素都有 offsetWidthoffsetHeight,不仅仅是body;

    无padding、无滚动条、无border时
    offsetWidth == style.width == clientWidth;

    有padding、无滚动条、有border时
    offsetWidth == style.width + style.padding + style.border;

    有padding、有滚动、有border时
    offsetWidth == style.width + style.padding + (style.border - 滚动轴的宽度) ;
    offsetHeight类似

    而offsetTop、offsetLeft就必须注意浏览器的兼容性问题啦.
    IE6、IE7(不过这些浏览器版本都比较老,早晚会被淘汰)
    offsetLeft == ( offsetParent 的 padding-left) + ( 当前元素的 margin-left )
    offsetTop == ( offsetParent 的 padding-top) + ( 当前元素的 margin-top)

    IE8/9/10、chrome浏览器
    offsetLeft == ( offsetParent 的 padding-left ) + ( offsetParent 的 border-left ) + ( offsetParent 的 margin-left ) + ( 当前元素的 margin-left )

    offsetTop == ( offsetParent 的 padding-top ) + ( offsetParent 的 border-top ) + ( offsetParent 的 margin-top ) + ( 当前元素的 margin-top)

    fireFox浏览器( 不需要 border )
    offsetLeft == ( offsetParent 的 padding-left ) + ( offsetParent 的 margin-left ) + ( 当前元素的 margin-left )

    offsetTop == ( offsetParent 的 padding-top ) + ( offsetParent 的 margin-top ) + ( 当前元素的 margin-top)

  • 与scroll相关的宽、高( 用的比较多 )

    scrollHeight:滚动大小,指的是包含滚动内容的元素大小(元素内容的总高度);
    scrollWidth:一般就是浏览器窗口的宽度;
    scrollTop( 属性可读写 ):当元素中的内容溢出的时候,该元素被卷起来的宽度
    scrollLeft( 属性可读写 ):当元素中的内容溢出的时候,该元素被卷起来的高度

    在div中的 scrollWidth 和 scrollHeight
    无滚动轴时
    scrollWidth == clientWidth == style.width + padding;

    有滚动轴时
    scrollWidth == 实际内容的宽度 + padding;
    scrollHeight == 实际内容的高度+ padding;

注:
浏览器的窗口是可以伸缩变换的,所以看到不同的值也很正常;

如遇错误,请加以指正

  • 结束语…………………………福利时间到………………………………

    大家同为程序员,在这里给大家真诚的送上福利。

    福利链接点击这里!

你可能感兴趣的:(原生js)