【问题标题】：How to style div classes that are stored in a JS variable?如何为存储在 JS 变量中的 div 类设置样式？
【发布时间】：2017-09-13 09:26:37
【问题描述】：

我正在尝试打印页面上显示的一系列 div。 div 存储在父级 ('printDialog') 中，并存储为 'prtContent'，以便在新窗口中显示。

$(document).on("click","#modalBtnPrint",function() { var prtContent = document.getElementById("printDialog").innerHTML; var WinPrint = window.open('', '', 'right=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0'); 如果（WinPrint！= null）{ WinPrint.document.write(prtContent); } WinPrint.focus(); WinPrint.print(); WinPrint.close(); });

我的问题是：

在 JS 中如何设置内部 div 类的样式？（即 - div class="formGroup" 带边框）

编辑：

在 T.Chmelevskij 的帮助下，这就是我要做的工作：

$(document).on("click","#modalBtnPrint",function() {
        var prtContent = document.getElementById("printDialog").innerHTML;
        var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
        if(WinPrint != null) {
            WinPrint.document.write(prtContent);
            var x = WinPrint.document.querySelectorAll(".update");
            for (i = 0; i < x.length; i++) {
                x[i].style.borderStyle = "solid";
            }
            var x = WinPrint.document.querySelectorAll(".required");
            for (i = 0; i < x.length; i++) {
                x[i].style.fontWeight = "bold";
            }
        }
        WinPrint.document.close();
        WinPrint.focus();
        WinPrint.print();
        WinPrint.close();
    });

谢谢大家！

【问题讨论】：

你为什么不只使用 CSS 打印媒体？

标签： javascript

【解决方案1】：

您的WinPrint 变量包含对所需窗口的引用。所以像：

WinPrint.window.document.querySelector('body').style.backgroundColor = "red";

工作。

但正如@epascarello 所提到的，如果它只是用于设置打印输出的样式，那么用于打印的 css '@media' 查询是最好的解决方案。

【讨论】：

【解决方案2】：

如果你想从一个变量中添加样式，你可以使用下面的代码：

var style = document.createElement('style');
style = **your variable which store css**
document.head.append(style);

这将在单击按钮时附加您的 CSS。以及没有其他 css 可以覆盖您的 css。

【讨论】：