视窗宽高offset、client、scroll
2016-08-20 本文已影响0人
ShortLife
先看盒子模型
W3C盒子模型
IE盒子模型
<!DOCTYPE html>
<html>
<head>
<title>视窗宽高</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
width: 200px;
height: 200px;
background: #007d65;
margin: 20px 50px;
padding: 30px 60px;
border: 30px solid #7fb80e;
position: absolute;
top: 100px;
left: 200px;
overflow: scroll;
}
</style>
<body>
<div class="box1">
<p>这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框</p>
</div>
</body>
<script type="text/javascript">
box1=document.getElementsByTagName('div')[0];
console.log('offsetTop='+box1.offsetTop); //120
console.log('offsetLeft='+box1.offsetLeft); //250
console.log('offsetWidth='+box1.offsetWidth); //380
console.log('offsetHeight='+box1.offsetHeight); //320
console.log('clientWidth='+box1.clientWidth); //303
console.log('clientHeight='+box1.clientHeight); //243
console.log('scrollWidth='+box1.scrollWidth); //303
console.log('scrollHeight='+box1.scrollHeight); //354
</script>
</html>
Paste_Image.png
有滚动条,滚动条在padding内,占用了padding,paading不够填充,便占用content区域,所以content大小为
width：200(CSS)-17(滚动条)
height：200(CSS)-17(滚动条)
- offsetTop: div上外border线到视窗顶的距离
- offsetLeft: div左外border线到视窗左的距离
- offsetWidth=borderLeft+paddingLeft+cssWidth+paddingRight+borderRight
- offsetHeight=borderTop+paddingTop+cssHeight+paddingBottom+borderBottom
- clientWidth(可视区域宽度): paddingLeft+cssWidth+paddingRight-滚动条宽
- scrollWidth(实际内容宽度): paddingLeft+cssWidth+paddingRight-滚动条宽+滚动条可以滚动的长度(若无滚动，则等于clientWidth，即本例)
- clientHeight(可视区域高度): paddingTop+cssHeight+paddingBottom-滚动条宽
- scrollHeight(实际内容高度): paddingTop+cssHeight+paddingBottom-滚动条宽+滚动条可以滚动的长度
