寬與高.png
一. window和document有什么區(qū)別?
window對(duì)象表示瀏覽器中打開的窗口,window對(duì)象可以省略
alert() == window.alert()
Document 對(duì)象是 Window 對(duì)象的一部分:
document.body == window.document.body
二. 與window相關(guān)的寬高
2.1 inner和outer
//瀏覽器窗口的視口寬度，如果存在垂直滾動(dòng)條,則包括它。
window.innerWidth
//瀏覽器窗口的視口高度，如果存在水平滾動(dòng)條,則包括它。
window.innerHeight
//整個(gè)瀏覽器窗口的寬度，包括包括所有界面元素（如工具欄/滾動(dòng)條）
window.outerWidth
//整個(gè)瀏覽器窗口的高度，包括包括所有界面元素（如工具欄/滾動(dòng)條）
window.outerHeight
innerHeight與outerHeight.png
2.2 window.screen
window.screen對(duì)象包含有關(guān)用戶屏幕的信息
//瀏覽器的屏幕的寬度
window.screen.width
//瀏覽器的屏幕的高度
window.screen.height
//可用的屏幕寬度
window.screen.availWidth
//可用的屏幕寬度
window.screen.availHeight
screen-height與availHeight.png
2.3. 舉例演示window相關(guān)的寬高
inner和outer(圖片來自網(wǎng)上).png
三．與document相關(guān)的寬高
3.1 與client相關(guān)的寬高
document.body.clientWidth
document.body.clientHeight
可視部分的寬度和高度
即: padding + content
- 在無padding，無滾動(dòng)條時(shí):
clientWidth = style.width
- 在有padding,無滾動(dòng)條時(shí):
clientWidth = style.width + style.padding * 2
- 在有padding ,有滾動(dòng)條時(shí)(且滾動(dòng)條是顯示的):
clientWidth = style.width + style.padding * 2 - 滾動(dòng)條寬度
3.2 與offset相關(guān)的寬高
document.body.offsetWidth
document.body.offsetHeight
這一對(duì)屬性指的是border + padding + content的寬度和高度
該屬性與其內(nèi)部元素是否超出大小無關(guān)，只與本來設(shè)定的border,width,height有關(guān)
- 假如無padding,無滾動(dòng)條,無border
offsetWidth = clientWidth = style.width
- 假如有padding,無滾動(dòng),有border
offsetWidth = style.width + style.padding * 2 + (border寬度) * 2
offsetWidth = clientWidth + border寬度 * 2
- 假如有padding,有滾動(dòng)條(且滾動(dòng)條是顯示的)，有border
offsetWidth = style.width + style.padding * 2 + border寬度 * 2
offsetWidth = clientWidth + 滾動(dòng)條寬度 + border寬度 * 2
3.3. 舉例演示client和offset的寬高
- 在無滾動(dòng)軸的情況下,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
- 在有滾動(dòng)軸的情況下,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)-滾動(dòng)條寬度
clientHeight=223px;//220+10*2(padding)-滾動(dòng)條寬度
client與offset(有滾動(dòng)條).png
3.4 與scroll相關(guān)的寬高
document.body.scrollWidth
document.body.scrollHeight
padding+包含內(nèi)容的完全高度(寬度)
仍是上面的代碼
<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
－－－－－－－－－－－－－－－華麗的分割線－－－－－－－－－－－
如果覺得我寫的還不錯(cuò),請(qǐng)踩踩demos合集,這是一些常用效果的合集.持續(xù)更新ing.
