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

标签：style obj DOM 对象 JavaScript 像素详解 var

在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">

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

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

标签：style,obj,DOM,对象,JavaScript,像素,详解,var
From： https://blog.51cto.com/zhishunet/9445067