更改JavaScript中的样式，而不会影响浏览器中呈现的内容

Question

我提取了分布在页面上的几个块，通过将它们绘制到画布上CanvasRenderingContext2D.drawImage()，然后将画布导出为PDF / JPG。现在，在绘制它们时，我还想整理它们的外观和/或移除/显示某些块的部分，因为从静态的角度来看，样式不再有意义。我可以body在body具有该类的样式上添加一个类，样式块的方式有所不同，构建画布，将其导出为选择的内容类型并删除body类，但这会使页面在1到2秒钟内显得古怪。（我想我可以用装载机盖住页面）我可以克隆该块，对其进行不同的样式设置或应用任何样式（内联或通过类）并从中绘制图像，但这并不是最佳选择。关于如何正确执行此操作的任何想法？我倾向于进行类似仿真的工作。将整个“导出样式”包含在本机下，@print并在将块绘制到画布上之前进行模拟，而不会影响浏览器中呈现的内容，但是我不确定是否可行。

Answer 1

我知道这些方法无法回答您的特定问题，但是也许这些是解决问题的可行方法。

听起来您正在尝试使某些内容可打印。我认为这是由某种用户交互触发的，所以...

这意味着您有一些界面选项。例如，您可以通过在整个事物上放置一个模态来“隐藏”屏幕，并显示一条消息“仅处理片刻”。然后，主体（或其他元素）类解决方案开始工作。

您可以按照建议复制元素。如果您选择这种方式，我会在更改副本时将副本从屏幕上移开。

 .element {

   position: fixed;

   left: -100vw;

 }

不知道需要重复多少次，很难推荐该选项。

或者，您可以将精力分担给service worker吗？这就需要将副本与DOM完全分离并在另一个线程中运行，但需要将其复制到内存中。

不过，这是一个非常有趣的问题！

Answer 2

我认为您可以用来node.cloneNode(true)对所有这些块进行深层克隆，将它们放在一个类名范围内的通用根目录中，该根目录远离用户的视线，然后您可以秘密地修改其样式。

由于您修改了节点的克隆版本，因此原始节点保持不变。另外，使用类名范围，您的CSS可以准确地将这些克隆作为目标。