擷取元素、浏覽器、螢幕分辨率寬度，高度，坐标的方法及其差別

首先我們弄出來倆個div，分别加上樣式：

<DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .wrap{
        width: 300px;
        height: 300px;
        margin: 30px;
        padding: 10px;
        border: 4px solid;
        background: yellow;
        position: relative;
    }
    .inner{
        width: 140px;
        height: 140px;
        padding: 10px;
        border:2px solid;
        background: orange;
    }
    </style>
</head>
<body>
    <div class="wrap" style="width:300px;height:300px;">
        <div class="inner" style="width:140px;height:140px;"></div>
    </div>
</body>
</html>

然後在js裡面擷取到這倆個div

var ins = document.getElementsByClassName("inner")[0],
    wrap = document.getElementsByClassName("wrap")[0];

下面開始擷取元素的寬度和高度

1.offsetWidth,offsetHeight方法計算寬度和高度的時候包含border跟padding的距離。

var iwidth = ins.offsetWidth,
    iHeight = ins.offsetHeight,
    wWidth = wrap.offsetWidth,
    wHeight = wrap.offsetHeight;

2.clientWidth，clientHeight方法計算時包含padding不包含border；（不包括滾動條的寬高）

var iWidth = ins.clientWidth,
    iHeight = ins.clientHeight,
    wWidth = wrap.clientWidth,
    wHeight = wrap.clientHeight;

3.NODE.style.width,NODE.style.height擷取樣式的寬高，擷取到的寬高不包括padding和border。

var iwidth = ins.style.width,
    iheight = ins.style.height,
    wwidth = wrap.style.width,
    wheight = wrap.style.height;

擷取元素的距其offsetParent元素的頂部/左側間距：

//擷取元素X,Y軸坐标位置
var insOffLeft = ins.offsetLeft,
    insOffTop = ins.offsetTop,
    wrapOffLLeft = wrap.offsetLeft,
    wrapOffTop = wrap.offsetTop;

擷取元素有定位的最近的父元素:

var insParent = ins.offsetParent,
  wrapParent = wrap.offsetParent;

擷取元素的左邊框和上邊框寬度：

var insBorderLeft = ins.clientLeft,
  insBorderTop = ins.clientTop,
  wrapBorderLeft = wrap.clientLeft,
  wrapBorderTop = wrap.clientTop;

擷取浏覽器寬度高度的方法：

var llw = document.documentElement.clientWidth,
  llh = document.document.clientHeight;

擷取頁面的寬高：

var docWidth = document.documentElement.scrollWidth,
  docHeight = document.documentElement.scrollHeight;

擷取螢幕分辨率的寬，高：

var screenH = window.screen.height,
  screenW = window.screen.width;

擷取視窗的寬高：

window.innerWidth
window.innerHeight
document.documentElement.clientWidth || document.body.clientWidth
document.documentElement.clientHeight || document.body.clientHeight