Javascript 媒体查询中的打印问题

代码：

HTML

CSS

更新：

演示：

---

我正在使用媒体查询打印动态div。它正在打印白页。任何帮助都将不胜感激。谢谢。

这里是未定义的变量

mydiv

，使用

dydiv

请按如下所示更改函数

function functionPrint(){  
  var dydiv = document.createElement('div');
  dydiv.id='printcontent';
  dydiv.innerHTML="HI";
  window.print();   
}

---

如果您在css中重新打印的body*显示为：none，则页面将打印为空#printcontent不在正文之外，因为正文包含了整个页面。相反，使用打印css时要更加具体。查看样板文件的印刷媒体查询，可以找到一个好的起点

 @media print {
        body * {
           display: none; // THIS WILL HIDE ALL CONTENT BETWEEN THE BODY TAGS so your page will be empty.
        }
        #printcontent, #printcontent * {
           display: block !important;
        }
        #printcontent {
           position: absolute;
           left: 0;
           top: 0;
        }
    }

---

更改

mydiv.innerHTML=“HI”

into

dydiv.innerHTML=“HI”。已更改，但它正在打印白页。谢谢，即使之后，它仍在打印白页？谢谢，莫利克。但是我不想打开窗口？我想如果没有打开打印对话框，您可能无法打印。请搜索您可能找到的。uframe？。。你是指我吗？怎么做？谢谢！，我已更改，现在它正在打印白色页面？请提供帮助
    #printcontent{
          display: none;
    }

        @media print {
            body * {
               display: none;
            }
            #printcontent, #printcontent * {
               display: block !important;
            }
            #printcontent {
               position: absolute;
               left: 0;
               top: 0;
            }
        }

function functionPrint(){  
  var dydiv = document.createElement('div');
  dydiv.id='printcontent';
  dydiv.innerHTML="HI";
  window.print();   
}

 @media print {
        body * {
           display: none; // THIS WILL HIDE ALL CONTENT BETWEEN THE BODY TAGS so your page will be empty.
        }
        #printcontent, #printcontent * {
           display: block !important;
        }
        #printcontent {
           position: absolute;
           left: 0;
           top: 0;
        }
    }