切换屏幕的CSS显示，但不打印介质

Question

我有这个html：<div id="zoom">...</div>。加载页面时，我将其设置为“display：none”。当某个事件被触发时，“zoom”id被设置为“display：block”。但是，我想要的是，如果用户打印页面，即使在特定事件被触发后，它也永远不会在“缩放”ID中打印。该事件通过jQuery将其设置为阻止：

$("#zoom").css({"display":"block"});

有没有办法在jQuery中定义它应该只应用于屏幕媒体？以上代码将其设置为所有媒体类型。

Answer 1

除非我误解了这个问题，否则您应该只能使用媒体查询进行打印。唯一奇怪的补充是你可能不得不使用!important规则，因为使用javascript（可能是内联样式）使元素可见。

@media print {
  #zoom {
    display: none !important;
  }
}