慕课网--JS/jQuery中宽高的理解和应用

﹏ヽ暗。殇╰゛Y 2022-07-15 07:14 74阅读 0赞

1.  window是指整个浏览器窗口，可省略  
    document是窗口的一部分，window窗口的一部分。html文档是document对象的一部分
2.  window.location document.location 是一样的
3.  window.innerHeight和 window.outerHeight  
    ![这里写图片描述][20161107132700954]
4.  ![这里写图片描述][20161107133007961]
5.  ![这里写图片描述][20161107133140128]  
    screen.width screen.availWidth是不可以改变的，但是screen.top 和 screen.left是浏览器窗口距离屏幕边的距离，随着窗口的变化而变化。
6.  document的cilentWidth和 clientHeight是指元素的可视部分的宽度和高度，即padding+content  
    如果没有滚动条，即为元素设定的高度和宽度  
    如果出现滚动条，滚动条会掩盖元素的宽高，那么该属性就是其本来的宽高减去滚动条的宽高。

body{
    border:20px solid #ccc;
    margin:10px;
    padding:40px;
    background:#eee;
    height:350px;
    width:500px;
    overflow:scroll;
    }
    console.log(document.body.clientHeight);//430
    console.log(document.body.clientWidth);//580

![这里写图片描述][20161107141433164]  
7. clientLeft 和 clientTop 用来读取元素的border的宽度和高度的  
clientTop=border-top的border-width  
clientLeft=border-left的border-width  
8. offsetWidth和offsetHeight  
元素的border+padding+content的宽度和高度  
9. scrollWidth和scrollHeight  
当给定的宽高小于浏览器窗口时，scrollWidth,scrollHeight的宽高等于浏览器窗口的宽高

当给定的宽高大于浏览器窗口，且内容小于给定的宽高  
scrollWidth给定的宽度+所有的padding+margin+border  
scrollHeight给定的高度+所有的padding+margin+border

当给定的宽高大于浏览器窗口，且内容大于给定的宽高  
scrollWidth内容宽度+所有的padding+margin+border  
scrollHeight内容高度+所有的padding+margin+border

1.  style.width 和 style.height是可读写的，就是css中设置的宽度和高度
2.  ![这里写图片描述][20161107153341667]

[20161107132700954]: /images/20220715/d9cb71649a12411c8c2fbb50f64e59ba.png
[20161107133007961]: /images/20220715/fa7d498e6e3047e092946e244bd2cb06.png
[20161107133140128]: /images/20220715/0d4ee2c5d4fc473ab76231216689d2f2.png
[20161107141433164]: /images/20220715/46a9712b45b64522b070e411e2728a9b.png
[20161107153341667]: /images/20220715/63edf1c97bec4188aac14d6093b53ba6.png