jquery.matchHeight 是一个非常有用的 jQuery 插件，它可以让多个元素等高对齐，使得页面更加美观。在本文中，我们将介绍如何使用 npm 包来安装和使用这个插件。
安装
首先，你需要在你的项目中安装 jQuery，如果你已经安装了，可以忽略此步骤。
npm install jquery --save
接着，你需要安装 jquery.matchHeight 插件。
npm install jquery.matchheight --save
引入
在你的 HTML 文件中引入 jQuery 和 jquery.matchHeight。
<head> <script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/jquery.matchheight/dist/jquery.matchHeight-min.js"></script> </head>
使用
假设我们有两个 div，分别是 .box1 和 .box2，我们想要让它们高度相等：
<div class="box1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> <div class="box2">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam egestas urna non tortor commodo, ut suscipit tellus laoreet.</div>
我们可以在 JavaScript 中调用 jquery.matchHeight 插件来实现：
$(function() { $('.box1, .box2').matchHeight(); });
这将会把 .box1 和 .box2 的高度都设置成它们两者中的最大高度。
$('.box1, .box2').matchHeight(options);
你还可以传递一个选项对象，来自定义插件的行为。例如：
$(function() { $('.box1, .box2').matchHeight({ byRow: true, property: 'height', target: null, remove: false }); });
这个选项对象的属性含义如下：
byRow: 布尔值，是否按行来匹配元素的高度（默认是按列）。property: 字符串，要设置的 CSS 属性，默认是 "height"。target: 字符串，要匹配高度的元素选择器，默认是 null，表示匹配所有同级元素。remove: 布尔值，是否在窗口大小改变时移除已经应用的高度（默认是 false）。
总结
jquery.matchHeight 是一个非常实用的 jQuery 插件，它可以让多个元素等高对齐。通过 npm 包的方式安装和使用 jquery.matchHeight 可以更方便地管理前端项目的依赖。本文介绍了该插件的安装、引入和使用方法，并提供了示例代码和选项对象的说明。希望本文能够帮助读者更好地开发前端页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33931
