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);  // 2825var widthItself = obj.offsetWidth;console.log(widthItself);  // 1200console.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; // 110var heightItself = obj.offsetHeight;  // 106var widthInner = obj.clientWidth;  // 100var heightInner = obj.clientHeight;  // 100var borderLeft = obj.clientLeft; // 3var borderTop = obj.clientTop; // 1alert('右边框的大小：' + (widthItself - widthInner - borderLeft)); // 7alert('下边框的大小：' + (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">

2、移动端手势库（hammer.js）

官网地址：https://hammerjs.github.io/