jsize 是一个小巧而灵活的 JavaScript 库，可用于获取浏览器中 DOM 元素的尺寸和位置信息。本文将介绍 jsize 的使用方法，让你更好地利用这个 npm 包。
安装
通过 npm 安装 jsize 包：
npm install jsize
或者，将以下标记添加到你的 HTML 文件，使用 CDN 引入 jsize：
<script src="https://cdn.jsdelivr.net/npm/jsize@2.0.0/dist/jsize.min.js"></script>
注意：在使用本地安装的 jsize 库时，需要通过 ES6 模块语法引入：
import jsize from 'jsize';
使用方法
获取元素的尺寸信息
可以通过 jsize.width() 和 jsize.height() 方法获取元素的宽度和高度：
const element = document.querySelector('.element');
const width = jsize.width(element);
const height = jsize.height(element);
console.log(width, height); // 输出元素的宽度和高度获取元素的位置信息
可以通过 jsize.top() 和 jsize.left() 方法获取元素的顶部和左侧位置坐标：
const element = document.querySelector('.element');
const top = jsize.top(element);
const left = jsize.left(element);
console.log(top, left); // 输出元素的顶部和左侧位置坐标监听尺寸变化
可以通过 jsize.on() 方法监听元素的尺寸变化：
const element = document.querySelector('.element');
jsize.on(element, 'resize', event => {
console.log(event); // 输出元素尺寸变化的事件对象
});示例
以下代码使用 jsize 库获取并输出 .element 元素的尺寸和位置信息：
-- -------------------- ---- ------- ------ ----- ---- -------- ----- ------- - ----------------------------------- ----- ----- - --------------------- ----- ------ - ---------------------- ----- --- - ------------------- ----- ---- - -------------------- --------------------------------------------------------------------- ----------------- --------- ----- -- - --------------------------------------------------------------------------------------------- ---
总结
jsize 可以方便地获取元素的尺寸和位置信息，使用简单，并可监听元素的尺寸变化。希望本文能够帮助你学习并使用 jsize 这个小巧实用的 JavaScript 库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/71890