在前端开发中，我们经常需要获取 HTML 元素的样式信息，一般可以通过 DOM API 的 style 属性来获取。但是，当元素应用了外部样式表或内联样式时，这种方式就不太可靠了。这时，我们可以使用 npm 包 get-style 来获取元素的真实样式，本文将介绍该包的使用教程。
安装
在终端中运行以下命令进行安装：
npm install get-style
用法
基本使用
使用 get-style 的方法很简单，只需要传入元素和样式名称即可。以下是一个示例代码：
const getStyle = require('get-style')
const el = document.querySelector('.my-element')
const bgColor = getStyle(el, 'background-color')
console.log(bgColor)上述代码中，getStyle 函数需要传入两个参数：要获取样式的元素和样式名称。在这个示例代码中，我们首先使用 querySelector 方法获取到了一个名为 my-element 的元素，并将其传入 getStyle 函数中来获取该元素的背景颜色信息。
选择器支持
除了直接传入元素对象，get-style 还支持传入选择器，它将根据该选择器查找符合条件的第一个元素并返回其样式信息。以下是一个示例代码：
const getStyle = require('get-style')
const bgColor = getStyle('.my-element', 'background-color')
console.log(bgColor)上述代码中，我们将 .my-element 作为第一个参数传入 getStyle 函数中，它将返回该选择器选中的第一个元素的背景颜色信息。
返回值
getStyle 函数的返回值是一个字符串，表示传入的样式属性值。需要注意的是，返回值是经过解析和计算后的真实样式值，而不是元素在样式表中定义的值。
实际应用
get-style 将真实样式值计算出来非常有用，因为它可以应对很多复杂情况，比如样式表中定义了变量或使用了媒体查询等。以下是一个示例代码：
-- -------------------- ---- -------
-------
----------- -
----------- -----
----------------- ----------------
-
------ ----------- ------ -
----------- -
----------- ------
-
-
--------
---- -------------------------
--------
----- -------- - --------------------
----- -- - -------------------------------------
----- ------- - ------------ -------------------
--------------------
---------在上述代码中，我们定义了一个名为 my-element 的元素，并在其样式表中定义了一个变量 --bg-color，用于设置该元素的背景色。此外，我们还使用了媒体查询，当屏幕宽度小于 600px 时，将该变量值设置为 green。
上述代码中，我们使用 get-style 包来获取该元素的背景颜色，它将计算出真实值并返回，而不受变量和媒体查询的影响。
总结
本文介绍了 npm 包 get-style 的使用教程，包括安装、基本使用、选择器支持、返回值以及实际应用等方面。get-style 可以帮助我们获取元素的真实样式值，解决样式表中使用变量或媒体查询等情况下的样式获取问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005678181e8991b448e3e47