打印时，将元素设置为内联显示，该元素设置为 None

when printing set an element to display inline, which was set to none

本文关键字：元素 设置 显示 None 打印      更新时间：2023-09-26

我有一个表格，它最初在一列中隐藏了一些（历史）数据。当我打印表格时，隐藏的数据被打印出来。这很好。当我单击历史记录列中的show-history链接时，表格会展开并显示隐藏的数据。 如果我随后打印此视图，则会得到隐藏的数据。同样，这是需要的。但是，当我单击hide-history链接然后打印时，我没有得到隐藏的数据。 这不好！

这是我的节目隐藏javascript

function showHide(shID) {
if (document.getElementById(shID)) {
  if (document.getElementById(shID+'-show').style.display != 'none') {
     document.getElementById(shID+'-show').style.display = 'none';
     document.getElementById(shID).style.display = 'block';
  }
  else {
     document.getElementById(shID+'-show').style.display = 'inline';
     document.getElementById(shID).style.display = 'none';
  }
}
}

在我的 JSP 中：

 <a href="#" id="cID${comment.comment_id}-show" class="showLink" onclick="showHide('cID${comment.comment_id}');return false;">show history</a>
<TBODY id="cID${comment.comment_id}" class="more">
 .... hidden content
 <a href="#" id="cID${comment.comment_id}-hide" class="hideLink" onclick="showHide('cID${comment.comment_id}');return false;">hide history</a>
 </TBODY>

样式屏幕.css

.more {
  display: none;
}

StylePrint.css（这个和其他尝试设置TBODY样式的尝试都没有奏效）

.more {
  display: block;
}

由于您要将.more的内联样式更改为display:none，因此该样式比StylePrint.css中定义的样式具有特异性。 这意味着，您不能在StylePrint.css中使用声明覆盖内联样式。

要修复：

尝试从带有 document.getElementById(shID).style.display = ''; 的.more中删除内联样式。

这应该默认.more回到hidden状态，并允许您在打印模式下使用 StylePrint.css 覆盖隐藏状态。

你的 JavaScript 将以内联方式设置（隐藏/显示）元素的样式。有两个带有media="screen"和media="print"的 css 文件将不起作用。

您需要（在"屏幕"css中）：

.more {
    display: none;
}
.more.show {
    display: block;
}

。并使用 JS，改为更改元素的类（添加/删除"显示"）。

相关文章：