在前端开发中，我们经常需要用到 CSS 属性。而有时候我们会忘记某个属性的名称或者拼写，这时候就需要查阅文档或者搜索引擎来帮助我们完成开发工作。为了解决这个问题，npm 上出现了一个名为 known-css-properties 的包，它可以提供所有标准的 CSS 属性名称和一些非标准的扩展属性。
安装
使用 npm 来安装 known-css-properties：
npm install known-css-properties --save-dev
使用方法
在代码中引入该包：
const knownCSSProperties = require('known-css-properties');然后就可以访问该包的属性了：
console.log(knownCSSProperties);
输出结果如下：
-- -------------------- ---- ------- - ---------------- ----- -------------- ----- ------------- ----- -- ------ ------------------------------------- ----- ---------------------- ---- -
其中，属性名作为对象键名，而值则始终为 true。
如果你只想获取标准的 CSS 属性，可以使用以下代码：
const standardCSSProperties = Object.keys(knownCSSProperties).filter(property => !property.startsWith('-'));
console.log(standardCSSProperties);输出结果如下：
-- -------------------- ---- ------- - ---------------- -------------- ------------- -- ------ -------------- ------------- --------- -
示例代码
下面是一个示例代码，它可以将所有标准 CSS 属性名和值输出到控制台：
const knownCSSProperties = require('known-css-properties');
const standardCSSProperties = Object.keys(knownCSSProperties).filter(property => !property.startsWith('-'));
standardCSSProperties.forEach(property => console.log(`${property}: ${getComputedStyle(document.body)[property]}`));这个示例代码会遍历所有的标准 CSS 属性，并通过 getComputedStyle 方法获取它们在当前页面中的实际值。你可以通过修改该代码来实现更具体的需求，比如获取某个特定元素的 CSS 值。
总结
使用 known-css-properties 包可以帮助我们快速查找和准确记忆 CSS 属性名称和拼写。同时，在实际开发中，我们也可以通过该包来优化代码，比如自动生成某些属性的值等。因此，建议开发者在日常工作中加强对该包的学习和应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/43166