使用JavaScript打印CSS椭圆形

Question

我正在尝试使用JavaScript在文本周围打印椭圆形。它不起作用。这是我的代码。在下面，我有一个小提琴的链接。

<link rel="stylesheet" href="styles.css" media="screen, print">
@media print {
.oval {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
    width: 2%;
    padding: 1px;
    background: #fff;
    border: 1px solid #666;
    color: #666;
    text-align: center;
  }
}
<form id="myPrint">
    <div class="oval">print this</div>
    <input type="button" value="PRINT" onClick="printTbl()">
</form>
<script language="javascript" type="text/javascript">
function printTbl() {
    var TableToPrint = document.getElementById('myPrint');
    newWin = window.open("");
    newWin.document.write(TableToPrint.outerHTML);
    newWin.print();
    newWin.close();
}
</script>

这是小提琴：https：//jsfiddle.net/jgvg43gm/4/甚至没有在小提琴中打印。有什么想法吗？

Answer 1

这是因为您在没有参考CSS的新窗口中写下HTML，因此不应用样式。

（ js小提琴不起作用，因为您需要将脚本设置在头部，而不是在onLoad函数中设置脚本，这是默认的。请参见JS窗口的右上角）