在前端开发中，我们经常需要对页面元素进行测量。而 skeeler 是一个用于计算几何形状测量值的 npm 包。本文将为大家介绍 skeeler 的使用教程。
安装
首先，我们需要在本地安装 skeeler。可以通过 npm 命令进行安装：
npm install skeeler --save
使用
当我们需要使用 skeeler 时，只需要引入并调用其 API 即可。以下是一个简单的示例：
const skeeler = require('skeeler');
const element = document.getElementById('myElement');
const measurement = skeeler(element);
console.log(measurement);在上面的示例中，我们首先引入 skeeler 模块。随后，我们通过 document.getElementById('myElement') 获取到我们想要测量的元素。最后，我们通过调用 skeeler 方法来获取该元素的测量值。
skeeler 的返回值是一个包括多种测量值的对象。以下是一些常见的测量值：
- width：元素宽度
- height：元素高度
- top：元素顶部坐标
- bottom：元素底部坐标
- left：元素左侧坐标
- right：元素右侧坐标
进阶用法
除了获取基本的测量值之外，skeeler 还支持一些额外的测量工具和计算。
measureChildren
如果你需要测量一个元素的子元素的值，可以使用 measureChildren 方法。例如：
const skeeler = require('skeeler');
const parent = document.getElementById('parentElement');
const children = parent.children;
const measurement = skeeler.measureChildren(parent, children);
console.log(measurement);在上面的示例中，我们首先获取父元素。随后，我们使用 parent.children 获取到众多子元素。最后，我们通过调用 skeeler.measureChildren 来获取所有子元素的测量值。
dimensionRatio
在一些设计中，元素的大小通常是相对于一个特定的宽高比而言的。在这种情况下，可以使用 dimensionRatio 方法来计算目标值。例如：
const skeeler = require('skeeler');
const element = document.getElementById('myElement');
const ratio = skeeler.dimensionRatio(element, [16, 9]);
console.log(ratio);在上面的示例中，skeeler.dimensionRatio 会返回一个数值，该值表示此元素与指定宽高比相符合的程度。
containsPoint
当鼠标事件发生时，我们需要判断事件点是否位于某个元素内部。此时，可以使用 containsPoint 方法。例如：
const skeeler = require('skeeler');
const element = document.getElementById('myElement');
const isInside = skeeler.containsPoint(element, [123, 456]);
console.log(isInside);在上面的示例中，skeeler.containsPoint 会返回一个布尔值，该值表示指定事件点是否在此元素内。
总结
在本文中，我们介绍了 npm 包 skeeler 的安装方法和使用教程，并且还介绍了一些进阶用法。我们希望这篇文章对你有所启发，在编写前端代码时能够更加便利地进行测量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600574d381e8991b448ea28d