Js中的width 和 height

宽与高.png

一. window和document有什么区别?

window对象表示浏览器中打开的窗口,window对象可以省略

alert() == window.alert()

Document 对象是 Window 对象的一部分:

document.body == window.document.body

二. 与window相关的宽高

2.1 inner和outer

//浏览器窗口的视口宽度，如果存在垂直滚动条,则包括它。
window.innerWidth 
//浏览器窗口的视口高度，如果存在水平滚动条,则包括它。
window.innerHeight 
//整个浏览器窗口的宽度，包括包括所有界面元素（如工具栏/滚动条）
window.outerWidth 
//整个浏览器窗口的高度，包括包括所有界面元素（如工具栏/滚动条）
window.outerHeight

innerHeight与outerHeight.png

2.2 window.screen

window.screen对象包含有关用户屏幕的信息

//浏览器的屏幕的宽度
window.screen.width
//浏览器的屏幕的高度
window.screen.height
//可用的屏幕宽度
window.screen.availWidth
//可用的屏幕宽度
window.screen.availHeight

screen-height与availHeight.png

2.3. 举例演示window相关的宽高

inner和outer(图片来自网上).png

三．与document相关的宽高

3.1　与client相关的宽高

document.body.clientWidth
document.body.clientHeight

可视部分的宽度和高度
即: padding + content

在无padding，无滚动条时:

clientWidth = style.width

在有padding,无滚动条时:

clientWidth = style.width + style.padding * 2

在有padding ,有滚动条时(且滚动条是显示的):

clientWidth = style.width + style.padding * 2 - 滚动条宽度

3.2 与offset相关的宽高

document.body.offsetWidth
document.body.offsetHeight

这一对属性指的是border + padding + content的宽度和高度该属性与其内部元素是否超出大小无关，只与本来设定的border,width,height有关

假如无padding,无滚动条,无border

offsetWidth = clientWidth = style.width

假如有padding,无滚动,有border

offsetWidth = style.width + style.padding * 2 + (border宽度) * 2
offsetWidth = clientWidth + border宽度 * 2

假如有padding,有滚动条(且滚动条是显示的)，有border

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

3.3. 举例演示client和offset的宽高

在无滚动轴的情况下,client与offset

#b1{
width: 530px;
height: 320px;
background-color: #fff;
position: relative;
}  
 #b2{
width: 220px;
height: 130px;
background-color: #fff45c;
border: 10px solid #d9b3e6;
padding: 10px;
position: relative;
left: 140px;
top: 90px;
}
================================
<body>  
<div id="b1">
      <div id="b2"></div>
</div>  
<script>  
    window.onload = function(){   
     var b2 = document.getElementById('b2');           
     console.log("offsetWidth="+b2.offsetWidth);
     console.log("offsetHeight="+b2.offsetHeight);
     console.log("clientWidth="+b2.clientWidth);  
     console.log("clientHeight="+b2.clientHeight);
    }  
    </script>  
    </body>

offsetWidth=260px;//220+10*2(padding)+10*2(border)
offsetHeight=170px;//130+10*2(padding)+10*2(border)
clientWidth=240px;//220+10*2(padding)
clientHeight=150px;//130+10*2(padding)

client与offset.png

在有滚动轴的情况下,client与offset

#b1{
width: 300px;
height: 220px;
background-color: #fff;
position: relative;
overflow: auto;
border: 10px solid #999;
padding: 10px;
}  
#b2{
width: 220px;
height: 250px;
background-color: #fff45c;
border: 10px solid #D9B3E6;
padding: 10px;
position: relative;
left: 140px;
top: 90px;
}
====================================
<body>  
<div id="b1">
    <div id="b2"></div>
</div>  
<script>  
window.onload = function(){  
    var b1 = document.getElementById('b1');  
     console.log("offsetWidth="+b1.offsetWidth);
     console.log("offsetHeight="+b1.offsetHeight);
     console.log("clientWidth="+b1.clientWidth);  
     console.log("clientHeight="+b1.clientHeight);
}  
</script>  
</body>

offsetWidth=340px; //300+10*2(padding)+10*2(border)
offsetHeight=260px;//220+10*2(padding)+10*2(border)
clientWidth=303px;//300+10*2(padding)-滚动条宽度
clientHeight=223px;//220+10*2(padding)-滚动条宽度

client与offset(有滚动条).png

3.4 与scroll相关的宽高

document.body.scrollWidth
document.body.scrollHeight

padding+包含内容的完全高度(宽度)

仍是上面的代码

<script>  
window.onload = function(){  
    var b1 = document.getElementById('b1');  
    console.log("scrollWidth="+b1.scrollWidth, "scrollHeight="+b1.scrollHeight);  
}  
</script>  
</body>

scrollWidth = 410px; //140+10+260
scrollHeight = 390px; //90+10+290

scroll.png

－－－－－－－－－－－－－－－华丽的分割线－－－－－－－－－－－
如果觉得我写的还不错,请踩踩demos合集,这是一些常用效果的合集.持续更新ing.