Javascript 如何将css媒体类型动态添加到页面

我遇到一个问题，无法从web应用程序中仅打印甘特图或表格

我有一个web应用程序，它有一个甘特图，我们在其中进行调度。 现在我的要求是，当我发出print命令时，我只想打印一张gannt图表。 我在我的页面样式标记中尝试了以下代码：

@媒体印刷品{ 正文*{ 可见性：隐藏； } 内容容器，.divGcBody{ 能见度：可见； } } ........}

---

您可以将此javascript函数与css js uses jQuery结合使用：

function printOnlyGantt() {
            var actualWidth = $('#myGantt').width();
            $('body').prepend($('#myGantt'));
            $('#myGantt').addClass("myScreenshot").css('width',actualWidth);
            $('body>*').css('display', 'none').css('visibility','visible');
         }
    }); 

CSS:

为了更好地工作，您必须在另一个选项卡中打开页面，或者在打印图表时向正文中添加自定义类，然后删除该类

---

这段代码经过测试，即使我在保存在本地页面上使用它，也能很好地工作

正文中的所有元素都不可见。它对我不起作用。我的整个页面都被屏蔽了。我想这是我的错误，我要修改我的问题：问题是我想打印一个div，滚动条水平和垂直，我想使用window打印。即使是无法在页面上显示或呈现的部分也要打印。我的功能必须工作，因为复制和元素及其子元素位于页面顶部，并隐藏所有其他部分，这样才能打印页面。当然，页面的虚拟空间很难自己管理，但不要混淆什么是程序员要隔离和选择打印的内容，什么是浏览器打印选项。这就是为什么Groupon这样的网站使用PDF来呈现虚拟空间：他们首先选择HTML dom元素，然后在整个PDF中进行翻译。在纸上或文件上打印pdf这是用户的任务。顺便说一句，在您的情况下，发送到打印机也可以直接从js发送页面的虚拟空间，这意味着您通过允许所有元素都在一张纸上的因素来限制所有元素。我不知道你在想什么，但我不知道你必须意识到什么；

body {
 display: block !important;
}

.myScreenshot {
 position: absolute;
 left:0px;
 top: 0px;
}

body>*{
  visibility:hidden;
}

.myScreenshot:first-child{
  display: initial !important;
}