javascript - 将 css 附加到 Javascript 中的可打印 innerHTML div

Question

我有一个页眉中有 2 个 css 的页面:

<link type="text/css" rel="stylesheet" href=<?= $theme_url ?>/css/page-kitchen.css">
<link type="text/css" rel="stylesheet" href=<?= $theme_url ?>/css/page-kitchen.css" media="print">

和2个脚本文件:

<script type="text/javascript" src="<?= $theme_url ?>/js/jquery.min.js"></script>
<script type="text/javascript" src="<?= $theme_url ?>/js/kitchen.js"></script>

我有一个打印 <img>调用 onclick 的标签打印事件:

<img src="<?= $site_url ?>/wp-content/uploads/printer.png" alt="Print page" onclick="printDiv('#body-print');" style="cursor: pointer; width: 5%; height: 5%;"></img>

打印页面 #body-div内容。

它打开打印机页面但不添加默认的 css 文件。这是我的 js 文件:

function printDiv(divName) {
    var printContents = document.getElementById(divName).innerHTML;
    var originalContents = document.body.innerHTML;

    document.body.innerHTML = printContents;

    window.print();

    document.body.innerHTML = originalContents;
}

我已经尝试附加 css 文件，但不能做得太远。勾选this和 this来自网站的解决方案，但没有一个对我有用。

Answer 1

我认为问题在于使用子类 (.divclass.subdivclass) 应用样式的 css 结构

当您将 div 内容移动到 body 时，它会获取其内容并将其移动到 body，从而摆脱父 div。