Javascript 将外部样式表中的CSS规则作为内联样式应用于元素

我正在从HTML文档生成PDF。当前必须使用style=”“属性（内联）应用样式

我想用外部样式表应用于元素的规则填充样式属性

我已经探讨了这里概述的可能性：-但是，这应用了过多的浏览器默认样式，您可以通过检查下面示例中的DIV看到这一点

有没有办法只应用我在样式表中定义的样式

函数applyStyles（el）{
变量样式=getComputedStyle（el）；
用于（让输入样式）{
让prop=key.replace（/\-（[a-z]）/g，v=>v[1].toUpperCase（））；
el.style[prop]=styles[key]；
}
}
applyStyles（document.getElementById（'test-div'）
#测试div{
填充：1rem；
边框：1px实心#CCC；
边界半径：3px；
字体系列：无衬线；
盒影：1px1px6pxRGBA（0,0,0,0.15）；
}
我是测试DIV
您始终可以创建一个数组（白名单），其中包含要保留的属性列表，然后使用它过滤掉不需要的属性。但我不确定如何过滤掉属性值​​以及属性名称。这不是最好的方法，但总是可以尝试的。很好的建议，除非有人提供更干净的方法，否则我会继续这样做，而且，我不会使用任何复杂的正则表达式，因为我注意到，在旧版本的Firefox中使用
.test（）
时，它有时会报告错误的值。（当我在测试针对Windows XP的浏览器的代码时）更新了w/白名单的想法：@Aleksandercieerski我非常担心使用indexOf（）而不是includes（）来检查我的白名单——但是支持XP时代的firefox浏览器对于我的需要来说似乎有点过分了。谢谢你的建议！您可以始终创建一个数组（白名单），其中包含要保留的属性列表，然后使用它过滤掉不需要的属性。但我不确定如何过滤掉属性值​​以及属性名称。这不是最好的方法，但总是可以尝试的。很好的建议，除非有人提供更干净的方法，否则我会继续这样做，而且，我不会使用任何复杂的正则表达式，因为我注意到，在旧版本的Firefox中使用
.test（）
时，它有时会报告错误的值。（当我在测试针对Windows XP的浏览器的代码时）更新了w/白名单的想法：@Aleksandercieerski我非常担心使用indexOf（）而不是includes（）来检查我的白名单——但是支持XP时代的firefox浏览器对于我的需要来说似乎有点过分了。谢谢你的建议！