JavaScript DOM对象的尺寸和位置详解

编程日记2024-03-20 15:35:17

iShot_2024-01-27_20.06.46.png

在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浏览器会忽略边框大小。

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n47" mdtype="fences"Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: pre; background: rgb(51, 51, 51); padding: 10px 10px 10px 30px; width: inherit; caret-color: rgb(184, 191, 198); color: rgb(184, 191, 198); font-style: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; text-indent: 0px; text-transform: none; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none; position: relative !important;"><!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></pre>

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对象中滚动条的当前位置）它的运用非常常见：指定特效或轮播图

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n69" mdtype="fences"Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: pre; background: rgb(51, 51, 51); padding: 10px 10px 10px 30px; width: inherit; caret-color: rgb(184, 191, 198); color: rgb(184, 191, 198); font-style: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; text-indent: 0px; text-transform: none; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none; position: relative !important;"><!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></pre>

2、obj.offsetTop 和 obj.offsetLeft

3、obj.clientTop 和 obj.clientLeft

这两个属性用来获取DOM对象的上边距和左边距的大小当四边大小都不想同时，可以通过计算得到下边距和右边距的大小

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n75" mdtype="fences"Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: pre; background: rgb(51, 51, 51); padding: 10px 10px 10px 30px; width: inherit; caret-color: rgb(184, 191, 198); color: rgb(184, 191, 198); font-style: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; text-indent: 0px; text-transform: none; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none; position: relative !important;"><!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></pre>

4、obj.style.top 和 obj.style.left

四、移动端DOM对象的尺寸和位置

1、像素的概念

像素分为两类：一类是物理像素，另一类为设备独立像素物理像素是显示屏（手机屏幕）上的最小的物理显示单元，在操作系统的调度下每个设备像素都有自己的颜色值和亮度值独立设备像素可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(如css像素),然后由相关系统转换成物理像素设备像素比是物理像素和设备独立像素的对应关系，它的值可以用公式获得: 设备像素比 = 物理像素 / 设备独立像素为了解决像素比出现的问题需要在页面添加一条meta标签

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

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

查看全文