屏幕视口宽度及元素尺寸的获取

最新推荐文章于 2024-11-15 21:39:03 发布

weixin_34313182

最新推荐文章于 2024-11-15 21:39:03 发布

阅读量151

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cckui/p/9915613.html

本文详述了原生JavaScript与jQuery中获取屏幕视口宽度、元素尺寸、位置及页面滚动状态的方法。包括window.innerHeight、document.documentElement.clientHeight、$(window).height()等获取视口宽度的技巧，以及getBoundingClientRect()、$(object).offset()等获取元素位置的函数。同时，介绍了通过window.getComputedStyle获取元素CSS值的方法。

原生 JavaScript 和 jQuery 获取屏幕视口宽度及元素尺寸的方法：

屏幕视口宽度

// 原生js方法:
window.innerHeight  // 标准浏览器及IE9+
document.documentElement.clientHeight  // 标准浏览器及低版本IE标准模式
document.body.clientHeight  // 低版本混杂模式

// jQuery方法：
$(window).height()

滚动条滚动的距离

获取浏览器窗口顶部与文档顶部之间的距离，即滚动条滚动的距离

// 原生js方法：
window.pagYoffset  // 标准浏览器及IE9+
document.documentElement.scrollTop  // 兼容ie低版本的标准模式
document.body.scrollTop  // 兼容混杂模式
// jQuery方法：
$(document).scrollTop()

获取元素尺寸

<body>
    <div id="box" style="height: 100px; width: 100px; border: 1px solid #bbb; padding: 10px; margin: 15px;"> </div>
</body>

let box = document.getElementById('box');

$('#box').width() = el.style.width;
$('#box').innerWidth() = el.style.width+el.style.padding;
$('#box').outerWidth() = el.offsetWidth = el.style.width+el.style.padding+el.style.border；
$('#box').outerWidth(true) = el.style.width+el.style.padding+el.style.border+el.style.margin；

但是，如果像上面使用原生style.xxx方法获取属性，这个元素必须已经有内嵌的样式，即<div style="...."></div>；

如果原先是通过外部或内部样式表定义css样式，必须使用window.getComputedStyle("元素", "伪类")[xxx]来获取样式值。

可以参考：获取元素CSS值之getComputedStyle方法熟悉--张鑫旭

获取元素的位置

// 原生js方法：
object.getBoundingClientRect(); // 返回元素的大小及其相对于视口的位置
// jQuery方法：
$(object).offset().top;   // 元素距离文档顶距离
$(object).offset().left;   //元素距离文档左边距离。

获取页面滚动位置

如果已定义，请使用pageXOffset和pageYOffset，否则使用scrollLeft和scrollTop，可以省略el来使用window的默认值。

const getScrollPos = (el = window) =>

  ({x: (el.pageXOffset !== undefined) ? el.pageXOffset : el.scrollLeft,

    y: (el.pageYOffset !== undefined) ? el.pageYOffset : el.scrollTop});

// getScrollPos() -> {x: 0, y: 500}

页面平滑滚动到顶部

使用document.documentElement.scrollTop或document.body.scrollTop获取到顶部的距离。
从顶部滚动一小部分距离。
使用window.requestAnimationFrame（）来滚动。

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }

};

// scrollToTop();

转载于:https://www.cnblogs.com/cckui/p/9915613.html