什么是 evaluate-style？
evaluate-style 是一个 JavaScript 库，可用于评估和计算 CSS 样式表的值。这个库可以使前端开发者更轻松地编写和测试 CSS ，并在 JavaScript 中使用它们。
与以往的 CSS 处理方式不同，使用 evaluate-style 可以：
- 直接计算 CSS 属性的值，比如获得盒模型（box model）的尺寸；
- 在不同的标签或元素中重新计算样式，比如使用“类继承”的方法计算 CSS；
- 覆盖或修改全局或局部 CSS 样式表。
使用 evaluate-style 可以避免手动计算 CSS 值的繁琐工作，减少错误和冗余代码，并对组件化开发流程有很大的帮助。
如何安装 evaluate-style
你可以使用 npm 安装 evaluate-style，方法如下：
npm install evaluate-style --save
如何使用 evaluate-style
计算 CSS 属性值
evaluate-style 最常见的用法是对 CSS 属性进行值计算。该库返回一个包含元素属性值的对象，并支持计算大部分 CSS 属性，如下所示：
-- -------------------- ---- ------- ------ ------------- ---- ---------------- ----- ------- - --------------------------------- ----- ------------- - -------------------------------- ----- ----- --------- - - ------ ------- ------- --------------------- -------- ------- ---------- ------------ - ----- ----------- - ------------------------ -------- ------------------------ -- ------- ------- ------- -------- -------- ------- ---------- -------------
以上代码从当前浏览器中获得样式定义，提供了一个带有四个 CSS 属性的对象，并使用 evaluateStyle 函数计算样式属性的值。console.log 的结果证明样式计算正确。
在不同的标签或元素中重新计算样式
evaluate-style 还支持在不同的标签或元素中重新计算样式，以实现更好的 CSS 重用。比如，一个元素具有自己的样式，但该样式的一部分可能基于其他元素的样式，这时候我们就可以使用“类继承”的方法计算 CSS，具体代码如下：
-- -------------------- ---- ------- ------ ------------- ---- ---------------- ----- ----- - ----------------------------- ----- ------- - ---------------------------------- ----- ------------------ - ------------------------------ ----- ----- -------------------- - -------------------------------- ------ ----- --------- - - ------ ------------------------- ----------- -------------------------------- --------- ------ - ----- ----------- - ------------------------ ------ ------------------------ -- ------- --------- ---- ------ ----------- ------- ------------ --------- -------
以上代码使用 evaluateStyle 函数，先取出 h2 标签中的 color 属性，并将这个值分配给新的 styleObject 对象，然后继续在同一对象中添加其他 CSS 属性。最后，我们将 styleObject 对象传递给 evaluateStyle 以将其他属性解析为浏览器可以使用的值。
覆盖或修改全局或局部 CSS 样式表
evaluate-style 还可以通过比较当前与所需值，导出差异的值，并将当前的值进行覆盖或者修改全局或局部 CSS 样式表。比如以下代码：
-- -------------------- ---- ------- ------ ------------- ---- ---------------- ----- ------- - ------------------------------ ----- ----------- - - ------ -------- ----------- -------- ------- ------ - -------------------------- --------
以上代码将改变 .box 类的颜色，添加宽度，并重新定义高度。注意，由于我们没有对 .box 的前景色属性进行重新定义，因此它将继续保持原始状态。如果我们想覆盖它，只需添加一个新的属性值即可。
总结
evaluate-style 是一个非常有用的 JavaScript 库，可用于计算和处理 CSS 属性和样式表。使用它可以简化编写和测试 CSS 的流程，以及更好地维护和修改代码。在进行项目开发时，我们应该好好掌握这个库，将其运用到我们的工作中，提高我们的开发效率和质量。
示例代码
以下是一个使用示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- -------------
-------
---- -
----------- --------
------ -----
-------- -----
-
--------
-------
------
---- -------------------- -----------
------- ---------------------- ---------------------------------
--------
----- ------- - ------------------------------
----- ----------- - -
------ --------
----------- --------
------- ------
-
-------------------------- --------
---------
-------
-------在这个例子中，我们有一个带有 .box 类的 div 元素。我们使用 evaluate-style 函数将 .box 元素的宽度、背景颜色和高度三个属性分别设置为 120px、white、60px。最终，元素的背景颜色由 #f5f5f5 变更为白色，高度和宽度也会相应的发生变化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590581e8991b448d6584