当我们在开发网页中多个元素需要高度对齐时，我们可能会使用 table 元素或者 JavaScript 脚本来实现，但是这些方式都存在一些问题，比如 table 元素结构繁琐或者需要编写大量的 JavaScript 代码。今天，我们就来介绍一款优秀的 npm 包 same-height，用它来实现高度对齐将变得十分简单。
什么是 same-height？
same-height 是一个轻量级的 npm 包，它可以帮助我们将多个元素的高度调整为相同。它不依赖于 jQuery，可以与原生 JavaScript 和其他框架无缝集成。
安装 same-height
使用 npm 安装 same-height，这样可以避免将第三方库直接添加到项目中：
--- ------- ----------- ------
使用 same-height
在 HTML 中使用 same-height
在 HTML 中使用 same-height 前，需要先为需要对齐的元素添加相同的类名，然后在 JavaScript 中调用 sameHeight 函数即可。
示例代码如下：
---- -------------------- ------------- -------------- -------------- ------ ------- -------------------------------------- -------- --------------------------- ---------
在这个例子中，我们首先为需要对齐的元素添加了同样的 same-height 类名，然后在 JavaScript 中调用了 sameHeight 函数来设置这些元素的高度。该函数的参数为类名。
在 JavaScript 中使用 same-height
除了在 HTML 中使用 same-height，我们还可以在 JavaScript 中使用它，这种情况下我们需要先获取需要对齐的元素，然后再调用 sameHeight 函数。
示例代码如下：
------ ---------- ---- ------------- ----- ------- - ------------------------------------------ --------------------
同样地，我们需要为需要对齐的元素添加 same-height class，然后在 JavaScript 中使用 querySelectorAll 查询对应元素再调用 sameHeight 函数即可。
高级选项
same-height 还提供了一些高级选项，允许我们更加灵活地使用它。
指定容器
默认情况下，same-height 会将设置相同类名的元素都设置为相同高度。但是，有时候我们可能只希望给同一个容器内部的元素进行高度调整。
为了解决这个问题，我们可以将 same-height 放置在容器中。
示例代码如下：
---- ------------------
---- --------------------
-------------
--------------
--------------
------
---- --------------------
---
------------------------ -----------------------
----
------
------
------- --------------------------------------
--------
---------------------- ---------------
---------重置样式
有时候，same-height 会破环原有的样式规则，比如边距和内边距等。为了解决这个问题，我们可以通过 reset 选项来重置样式。
示例代码如下：
------ ---------- ---- ------------- ----- ------- - ------------------------------------------ ------------------- ------- -------
监听窗口变化
窗口大小变化时，相应元素的高度也会变化。如果我们想要在窗口大小变化时，自动更新 same-height，我们可以使用 watch 选项。
示例代码如下：
------ ---------- ---- ------------- ----- ------- - ------------------------------------------ ------------------- ------- -------
结语
same-height 是一款优秀的 npm 包，它可以帮助我们轻松地将多个元素的高度调整为相同。它使用简单，功能强大，可以帮助我们提高开发效率。如果你正在寻找类似的解决方案，不妨试试 same-height。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005601381e8991b448de127