宽与高.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.
