Javascript获取网页各种高宽及位置总结

2016年07月26日

screen 对象

获取屏幕的高宽（分辨率）

screen.width; //屏幕的宽
screen.height; //屏幕的高
screen.availWidth; //屏幕可用宽度   屏幕的像素高度减去系统部件高度之后的值
screen.availHeight; //屏幕可用高度   屏幕的像素宽度减去系统部件宽度之后的值

window 对象

获得窗口位置及大小

window.screenTop; //窗口顶部距屏幕顶部的距离
window.screenLeft; //窗口左侧距屏幕左侧的距离
window.innerWidth; //窗口中可视区域(viewpoint)的宽度
console.log(window.innerWidth); //chrome 1366 ff 1366 ie 1366
window.innerHeight; //窗口中可视区域(viewpoint)的高度  该值与浏览器是否显示菜单栏等因素有关
console.log(window.innerHeight); //chrome 643  ff 657  ie 673
window.outerWidth; //浏览器窗口本身的宽度(可视区域宽度+浏览器边框宽度)
console.log(window.outerWidth); //chrome 1366 ff 1382 ie 1382
//说明chrome在最大化时浏览器窗口没有边框宽度,非最大化时有8px边框
//ff和ie上下左右有8px的边框宽度
window.outerHeight; //浏览器窗口本身的高度
console.log(window.outerHeight); //chrome 728 ff 744 ie 744

element 对象

在介绍 element 对象各种高宽之前有必要解释一下盒模型
默认盒模型 box-sizing:content-box;

boxWidth = 2 * border + 2 * padding + width;
boxHeight = 2 * border + 2 * padding + height;

示例代码

<style type="text/css">
  body {
    margin: 8px;
    padding: 10px;
    border: 20px solid yellow;
  }
  .no-scrollbar {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 20px solid yellow;
    margin: 30px;
    background-color: red;
  }

  .wrap {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 20px solid yellow;
    margin: 30px;
    background-color: red;
  }
</style>
<div class="no-scrollbar">0123456789</div>
<div class="wrap">
  <div class="has-scrollbar">123456789</div>
</div>

element.clientWidth:表示元素的可见宽度，以像素计。包括内边距，但不包括垂直滚动条、边框和外边距。
element.clientHeight:返回元素的可见高度，以像素计，包含内边距，但不包括水平滚动条、边框和外边距。
element.clientLeft:返回元素的左边框的宽度，以像素计，包滚动条宽度(如果左侧有滚动条)，不包括外边距和内边距
element.clientTop:返回元素的上边框的宽度，以像素计，不包括外边距和内边距

//clientWidth = 2*padding + width
//clientHeight = 2*padding + height
console.log("无滚动条时");
console.log(document.getElementsByClassName("no-scrollbar")[0].clientWidth); //120
console.log(document.getElementsByClassName("no-scrollbar")[0].clientHeight); //120
console.log(document.getElementsByClassName("no-scrollbar")[0].clientLeft); //20
console.log(document.getElementsByClassName("no-scrollbar")[0].clientTop); //20
console.log("有滚动条时");
console.log(document.getElementsByClassName("has-scrollbar")[0].clientWidth); //120
console.log(document.getElementsByClassName("has-scrollbar")[0].clientHeight); //120
console.log(document.getElementsByClassName("has-scrollbar")[0].clientLeft); //20
console.log(document.getElementsByClassName("has-scrollbar")[0].clientTop); //20

element.offsetWidth:返回元素的布局宽度包括边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及 CSS 设置的宽度(width)的值。
element.offsetHeight:返回元素的布局高度包括边框(border)、垂直线上的内边距(padding)、水平方向滚动条(scrollbar)（如果存在的话）、以及 CSS 设置的宽度(height)的值。
element.offsetLeft:返回当前元素左上角相对于父元素的左边界偏移的像素值。
element.offsetTop:返回当前元素左上角相对于父元素的上边界偏移的像素值。

//offsetWidth = 2*border + 2*padding + width
//offsetHeight = 2*border + 2*padding + height
console.log("无滚动条时");
console.log(document.getElementsByClassName("no-scrollbar")[0].offsetWidth); //160
console.log(document.getElementsByClassName("no-scrollbar")[0].offsetHeight); //160
console.log(document.getElementsByClassName("no-scrollbar")[0].offsetLeft); //38
console.log(document.getElementsByClassName("no-scrollbar")[0].offsetTop); //30
console.log("有滚动条时");
console.log(document.getElementsByClassName("has-scrollbar")[0].offsetWidth); //160
console.log(document.getElementsByClassName("has-scrollbar")[0].offsetHeight); //160
console.log(document.getElementsByClassName("has-scrollbar")[0].offsetLeft); //68
console.log(document.getElementsByClassName("has-scrollbar")[0].offsetTop); //250 这是第二个子元素

scrollWidth: 返回元素的内容区域宽度或元素的本身的宽度中更大的那个值。若元素的宽度大于其内容的区域（例如，元素存在滚动条时）,scrollWidth 的值要大于 clientWidth。返回元素的整个宽度（包括带滚动条的隐蔽的地方）
scrollHeight: 没有垂直滚动条的情况下，scrollHeight 值与元素视图填充所有内容所需要的最小值 clientHeight 相同。
scrollTop: 向下滑动滚动块时元素隐藏部分的高度。不设置时默认为 0，其值随着滚动块滚动而变化
scrollLeft: 向右滑动滚动块时元素隐藏部分的宽度。不设置时默认为 0，其值随着滚动块滚动而变化

//scrollWidth = 2*border + 2*padding + width + scrollLeft
//scrollHeight = 2*border + 2*padding + height + scrollTop
console.log("无滚动条时");
console.log(document.body.scrollWidth); //1360
console.log(document.body.scrollHeight); //638
console.log(document.body.scrollLeft); //0
console.log(document.body.scrollTop); //0
console.log("有滚动条且滚动条都拉到右下角时");
console.log(document.body.scrollWidth); //1468
console.log(document.body.scrollHeight); //876
console.log(document.body.scrollLeft); //125
console.log(document.body.scrollTop); //255

element.getBoundingClientRect()

getBoundingClientRect 用来返回元素的大小以及相对于浏览器可视窗口的位置，用法如下：

var clientRect = element.getBoundingClientRect();

clientRect 是一个 DOMRect 对象，包含 left，top，right，bottom，它是相对于可视窗口的距离，滚动位置发生改变时，它们的值是会发生变化的。除了 IE9 以下浏览器，还包含元素的 height 和 width 等数据，具体可查看链接Element.getBoundingClientRect()

在页面高宽调试时可参考：

console.log("屏幕的宽：" + window.screen.width);
console.log("屏幕的高：" + window.screen.height);
console.log("屏幕可用工作区宽度：" + window.screen.availWidth);
console.log("屏幕可用工作区高度：" + window.screen.availHeight);

console.log("窗口左侧距屏幕左侧的距离：" + window.screenLeft);
console.log("窗口顶部距屏幕顶部的距离：" + window.screenTop);

console.log("body的可见宽度(2*padding + width)：" + document.body.clientWidth);
console.log(
  "body的可见高度(2*padding + height)：" + document.body.clientHeight
);
console.log("body的左边框宽度：" + document.body.clientLeft);
console.log("body的上边框宽度：" + document.body.clientTop);

console.log(
  "body的布局宽度(2*border + 2*padding + width)：" + document.body.offsetWidth
);
console.log(
  "body的布局高度(2*border + 2*padding + width)：" + document.body.offsetHeight
);
console.log(
  "body左上角相对于父元素的左边界偏移的像素值：" + document.body.offsetLeft
);
console.log(
  "body左上角相对于父元素的上边界偏移的像素值：" + document.body.offsetTop
);

console.log(
  "body的整体宽度(2*margin + 2*border + 2*padding + width + scrollLeft)：" +
    document.body.scrollWidth
);
console.log(
  "body的枕套i高度(2*margin + 2*border + 2*padding + width + scrollTop)：" +
    document.body.scrollHeight
);
console.log("body被卷去的高：" + document.body.scrollTop);
console.log("body被卷去的左: " + document.body.scrollLeft);

event 对象

event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
event.screenX:相对电脑屏幕的坐标，以屏幕左上角为坐标原点到鼠标所在点的水平距离
event.screenY:相对电脑屏幕的坐标，以屏幕左上角为坐标原点到鼠标所在点的垂直距离
event.pageX:相对整个页面的坐标，以页面的左上角为坐标原点到鼠标所在点的水平距离（IE8 不支持）
event.pageY:相对整个页面的坐标，以页面的左上角为坐标原点到鼠标所在点的垂直距离（IE8 不支持）
event.clientX:相对可视区域的坐标，以浏览器可视区域左上角为坐标原点到鼠标所在点的水平距离
event.clientY:相对可视区域的坐标，以浏览器可视区域左上角为坐标原点到鼠标所在点的垂直距离
event.offsetX:相对于自身的坐标，以自身的 padding 左上角为坐标原点到鼠标所在点的水平距离
event.offsetY:相对于自身的坐标，以自身的 padding 左上角为坐标原点到鼠标所在点的水平距离
event

获取鼠标相对于可视窗口的位置坐标

<label for="mouseXPosition">鼠标的X坐标为：</label>
<input type="text" id="mouseXPosition" name="mouseXPosition" />
<label for="mouseYPosition">鼠标的Y坐标为：</label>
<input type="text" id="mouseYPosition" name="mouseYPosition" />
<script type="text/javascript">
  document.onmousemove = mouseMove;

  function mouseMove(event) {
    event = event || window.event;
    var mousePos = mousePosition(event);
    document.getElementById("mouseXPosition").value = mousePos.x;
    document.getElementById("mouseYPosition").value = mousePos.y;
  }

  function mousePosition(event) {
    if (event.pageX || event.pageY) {
      return {
        x: event.pageX,
        y: event.pageY,
      };
    } else {
      return {
        x: event.clientX + document.body.scrollLeft - document.body.clientLeft,
        y: event.clientY + document.body.scrollTop - document.body.clientTop,
      };
    }
  }
</script>

原文链接: https://jesse121.github.io/blog/articles/2016/07/26.html

版权声明: 转载请注明出处.

前端之路

路漫漫其修远兮，吾将上下而求索