JavaScript DOM对象的尺寸和位置详解
在DOM对象操作中，其尺寸和位置也是DOM的核心内容，因为js的“交互式应用”几乎少不了对DOM对象的尺寸和位置进行操作，特别是js动画效果。
一、关于DOM对象的尺寸和位置介绍
DOM对象的尺寸和位置的属性
| DOM对象的属性 | 描述 |
|---|---|
| obj.scrollWidth 和 obj.scrollHeight | DOM对象的内部实际部分和内边距 |
| obj.scrollTop 和 obj.scrollLeft | 获取滚动条被隐藏的区域大小，也可设置定位到该区域 |
| obj.offsetWidth 和 obj.offsetHeight | DOM对象的实际自身宽度和高度 |
| obj.offsetTop 和 obj.offsetLeft | 获取当前元素相对于父元素的位置 |
| obj.clientWidth 和 obj.clientHeight | DOM对象内容可视部分和内边距的宽高 |
| obj.clientTop 和 obj.clientLeft | 获取元素设置的上边距和左边框的大小 |
| obj.styleWidth 和 obj.styleHeight | 行内样式设置的CSS属性值 |
| obj.style.top 和 obj.style.left | 设置当前元素相对于符元素的位置 |
二、DOM文档对象的尺寸
DOM文档对象的尺寸属性共分为4类：
- obj.scrollWidth 和 obj.scrollHeight（DOM对象内部视为一个整体，它所占据的大小）
- obj.offsetWidth 和 obj.offsetHeight（DOM对象自身的大小，不计算外边距）
- obj.clientWidth 和 obj.clientHeight（DOM对象可视区域，不计算外边距、边框和滚动条）
- obj.style.width 和 obj.style.height（DOM对象行内式CSS属性初始化的值）
1、obj.scrollWidth 和 obj.scrollHeight
表示一个DOM文档对象的内部实际大小，包括其内边距和内容的实际大小。比如浏览器中的某个DOM对象嵌套了另一个类似浏览器的窗口（此刻这个DOM对象的overflow属性值为auto），此刻会存在兼容性的问题，firefox和opera浏览器会增加本DOM对象的外边框大小，而ie、chrome、safari浏览器会忽略边框大小。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_vx:zhishunet</title>
<style>
#outer{
width:300px;height: 300px;border: 5px solid blue;
background:pink;padding: 40px;margin: 30px;overflow: auto;
}
#inner{
width: 500px;height: 500px;border: 1px solid red;
background: yellow;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner"></div>
</div>
</body>
<script>
window.onload = function (){
var outer = document.getElementById('outer');
// DOM对象内部实际宽度:582; 实际高度：582; [40 + 1+ 500 + 1 + 40 = 582]
console.log('DOM对象内部实际宽度:'+ outer.scrollWidth + '; 实际高度：' + outer.scrollHeight);
// 宽度：365; 高度：365 [ 300 + 40 + 40 - 滚动条宽高 = 365]
console.log('宽度：' + outer.clientWidth + '; 高度：' + outer.clientHeight);
}
</script>
</html>
2、obj.offsetWidth 和 obj.offsetHeight
表示DOM对象自身宽高，包括边框、内边距和滚动条（外边距不计算在内）
3、obj.clientWidth 和 obj.clientHeight
表示DOM对象的可用宽高，包括内容可视部分和内边距，而DOM对象自身的边框和滚动条是不计算在内的
与obj.offsetWidth 和 obj.offsetHeight相比它们之间的差别也就是DOM对象自身的边框宽度和滚动条宽度
4、obj.style.width 和 obj.style.height
表示DOM对象的行业样式的属性值，如果元素css样式不是使用行业样式赋值的则这两个值分别为空字符串
三、DOM文档对象的位置
DOM文档对象的位置属性共分为4类：
- obj.scrollTop 和 obj.scrollLeft（获取滚动条被隐藏的区域大小）
- obj.offsetTop 和 obj.offsetLeft（获取当前DOM对象相对于父元素的偏移量）
- obj.clientTop 和 obj.clientLeft（获取元素设置的上边距和左边距的大小）
- obj.style.top 和 obj.style.left（设置当前DOM对象相对于父元素的偏移量）
1、obj.scrollTop 和 obj.scrollLeft
这两个属性用来获取或设置被隐藏的区域大小（DOM对象中滚动条的当前位置）
它的运用非常常见：指定特效或轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_vx:zhishunet</title>
<style>
ul{
width: 1200px;height: 379px;list-style: none;
overflow: hidden;white-space: nowrap;padding: 0;
}
li{
display: inline-block;padding: 0 10px;
}
img{
width: 379px;
height: 379px;
}
</style>
</head>
<body>
<ul>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
<li><img src="images/6.jpg" alt=""></li>
<li><img src="images/7.jpg" alt=""></li>
</ul>
</body>
<script>
var obj = document.getElementsByTagName('ul')[0];
var widthContain = obj.scrollWidth;
console.log(widthContain); // 2825
var widthItself = obj.offsetWidth;
console.log(widthItself); // 1200
console.log(obj.scrollLeft); // 0
var flag = 1;
setInterval(function (){
obj.scrollLeft += flag;
if(obj.scrollLeft === widthContain - widthItself) flag = -1;
if (obj.scrollLeft === 0) flag = 1;
},10);
</script>
</html>
2、obj.offsetTop 和 obj.offsetLeft
3、obj.clientTop 和 obj.clientLeft
这两个属性用来获取DOM对象的上边距和左边距的大小
当四边大小都不想同时，可以通过计算得到下边距和右边距的大小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_vx:zhishunet</title>
<style>
#test{
width: 100px;
height: 100px;
border-top: 1px solid #ccc;
border-right: 7px solid #ccc;
border-bottom: 5px solid #ccc;
border-left: 3px solid #ccc;
}
</style>
</head>
<body>
<div id="test">
<div id="aa"></div>
</div>
</body>
<script>
var obj = document.getElementById('test');
var widthItself = obj.offsetWidth; // 110
var heightItself = obj.offsetHeight; // 106
var widthInner = obj.clientWidth; // 100
var heightInner = obj.clientHeight; // 100
var borderLeft = obj.clientLeft; // 3
var borderTop = obj.clientTop; // 1
alert('右边框的大小：' + (widthItself - widthInner - borderLeft)); // 7
alert('下边框的大小：' + (heightItself - heightInner - borderTop)); // 5
</script>
</html>
4、obj.style.top 和 obj.style.left
四、移动端DOM对象的尺寸和位置
1、像素的概念
像素分为两类：一类是物理像素，另一类为设备独立像素
物理像素是显示屏（手机屏幕）上的最小的物理显示单元，在操作系统的调度下每个设备像素都有自己的颜色值和亮度值
独立设备像素可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(如css像素),然后由相关系统转换成物理像素
设备像素比是物理像素和设备独立像素的对应关系，它的值可以用公式获得: 设备像素比 = 物理像素 / 设备独立像素
为了解决像素比出现的问题需要在页面添加一条meta标签
<meta name = "viewport" content="width=devices-width,initial-scale=1">
