CSS 检查预览时不工作

Question

1) 我有一个表单，我将在下一个选项卡中显示该表单的预览。我设置了一些 CSS 但在单击预览按钮后，CSS 没有反映在字段上。

2) 是否有任何其他方法可以在打开的新选项卡中显示选项卡window？

/*form preview*/
function PrintPreview() {
  var toPrint = document.getElementById('from_privew');
  var popupWin = window.open('', '_blank', 'width=1000,height=1000,location=no,left=200px');
  popupWin.document.open();
  popupWin.document.write('<html><title>::Print Preview::</title><link rel="stylesheet" type="text/css" href="Print.css" media="screen"/></head><body>')
  popupWin.document.write(toPrint.innerHTML);
  popupWin.document.write('</div></body></html>');
  popupWin.document.close();
}

@media print{
    input[type="text"],
    input[type="email"] {
      border: 1px solid #000;
      padding: 05px;
      border-radius: 05px;
    }

    input[type="submit"],
    a {
      background: #0088cc;
      border: none;
      border-radius: 05px;
      padding: 08px 25px;
      color: #fff;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id="from_privew">
  <form>
    <input type="text" name="name">
    <input type="email" name="email">
    <input type="submit" name="submit">
    <a href="#" onclick="PrintPreview()">Preview</a>
  </form>
</div>

Answer 1

将您的 css 放入单独的文件 Print.css 并删除 @media print:

input[type="text"],
input[type="email"] {
    border: 1px solid #000;
    padding: 05px;
    border-radius: 05px;
}

input[type="submit"],
a {
    background: #0088cc;
    border: none;
    border-radius: 05px;
    padding: 08px 25px;
    color: #fff;
}

然后修改您的 javascript 以包含此文件的参考：

function PrintPreview() {
    var toPrint = document.getElementById('from_privew');
    var popupWin = window.open('', '_blank', 'width=1000,height=1000,location=no,left=200px');
    popupWin.document.open();
    popupWin.document.write('\
        <html> \
            <head> \
                <title>::Print Preview::</title> \
                <link rel="stylesheet" type="text/css" href="Print.css" media="screen"/> \
                <link rel="stylesheet" type="text/css" href="style.css" media="screen"> \
            </head> \
            <body> \
                <div>')
    popupWin.document.write(toPrint.innerHTML);
    popupWin.document.write('\
                </div> \
            </body> \
        </html>');
    popupWin.document.close();
}

对于第二部分，页面是否在新 window 或新选项卡中打开取决于浏览器（或浏览器设置）。所以我认为你对此无能为力。

CSS 检查预览时不工作

CSS not working while checking preview

html

javascript

css

jquery

preview