如何将css媒体类型动态添加到页面
如何将css媒体类型动态添加到页面
提问于 2014-10-13 21:44:55
我遇到了一个问题，那就是从我的web应用程序中只打印甘特图(或表格)。
我有一个web应用程序，其中有一个甘特图，我们在其中做日程安排的事情。现在我的要求是，当我给出打印命令时，我只想打印一个图表。我在我的页面样式标签中尝试了以下代码：
<style type="text/css">
@media print {
body * {
visibility: hidden;
}
#content-container , .divGcBody {
visibility: visible;
}
}
........}<div class="divGcBody">
<div class="divGcBodySection">
<div class="divGcColumns"></div>
<!-- end of divGcColumns -->
<div class="divGcTimeline">
<div class="divHCDispList">
<div class="divTmlnRows divSlider"></div>
</div>
<!-- end of divHCDispList -->
</div>
<!-- end of divGcTimeline -->
</div>
</div>
但是由于甘特图是在运行时动态生成的，这个解决方案不起作用，它只给了我在.jsp文件中定义的任何内容。
请告诉我如何才能从整个应用程序中只打印出甘特图。*在运行时生成甘特图(或表)
回答 1
Stack Overflow用户
发布于 2014-10-13 22:00:16
你可以结合使用这个javascript函数和css (js使用jQuery)：
function printOnlyGantt() {
var actualWidth = $('#myGantt').width();
$('body').prepend($('#myGantt'));
$('#myGantt').addClass("myScreenshot").css('width',actualWidth);
$('body>*').css('display', 'none').css('visibility','visible');
}
}); CSS：
body {
display: block !important;
}
.myScreenshot {
position: absolute;
left:0px;
top: 0px;
}
body>*{
visibility:hidden;
}
.myScreenshot:first-child{
display: initial !important;
}要正常工作，您必须在另一个选项卡中打开页面，或者在打印图表时将自定义类添加到正文中，然后删除该类。
这段代码已经过测试，即使我在本地保存的页面上使用它，它也能很好地工作
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26341513
复制相关文章
相似问题
腾讯云开发者
