打印时为什么页面元素不会隐藏？

Question

我有一个网站，我正在处理“打印页面”按钮。当页面打印时，我 想要隐藏页面的某些元素（例如左手导航，顶部导航等......）。

我已将此添加到我的style.css：

@media print {
  #topnav { display:none }
  #left-col { display:none }
}

但是，当我去查看页面的打印预览时，这些元素仍然存在。

非常感谢任何帮助！

Answer 1

我明白了。这是我的编码错误。我的样式表的原始链接 看起来像这样：

<link href="/style.css" rel="stylesheet" type="text/css" media="screen" />

并造成了冲突。我删除了media="screen"后，效果非常好。

Answer 2

您可以尝试以下代码：

HTML CODE

<input type="submit" id="print" value="Submit">

JS CODE

$(document).ready(function(){
  $('#print').on('click', function(){
        $('selector i.e #leftnav, #topnav').die();
     });
  });

<强> OR

$('selector i.e #leftnav, #topnav').hide();