Javascript 正在尝试创建仅显示3个div的打印页

我正试图编写一个代码，隐藏除了三个div之外的所有页面元素。这是为了让人们有一个打印机友好的版本。我用jQuery编写了它，但是（这对我们的供应商来说是政治性的）它不会工作

代码如下：

<script type='text/javascript'>function prntz(){
document.getElementsByTagName("body").style.display = "none";
document.getElementById("hider").style.display = "inline";
document.getElementById("hider1").style.display = "inline";
document.getElementById("hider2").style.display = "inline"; 
};</script>

函数prntz（）{
document.getElementsByTagName（“body”）.style.display=“无”；
document.getElementById（“hider”）.style.display=“inline”；
document.getElementById（“hider1”）.style.display=“inline”；
document.getElementById（“hider2”）.style.display=“inline”；
};

其中，在单击按钮时调用prntz函数。我已经能够使divs显示，但是条带化一切都不起作用。有什么想法吗

我觉得我不正确地使用了getElementsByTagName，但我不确定。

您不正确地使用了

getElementsByTagName

（它返回一个

NodeList

，它没有

样式

属性），但这只是为了防止出现不同的问题：如果您隐藏

正文

，无论您如何处理

正文中的任何内容

，它都不会显示出来

使用CSS，使用打印样式表可以更好地处理此问题：

@media print {
    /* ...rules to show and hide things here...*/;
}

我可能会使用一个类来隐藏您不想打印的任何内容。事实上，大家都知道我使用了两个类：

print

和

no print

print

表示“我只想在打印时看到这个”

no print

表示“我只想在不打印时看到这个”。任何没有一个类或另一个类的内容都会在屏幕上和打印时显示。你只在问题的顶层使用它

规则如下所示：

@media not print {
    .print {
        display: none;
    }
}
@media print {
    .no-print {
        display: none;
    }
}

例如：

例子
@媒体不打印{
.打印{
显示：无；
}
}
@媒体印刷品{
1.不打印{
显示：无；
}
}
在屏幕上和打印时显示

仅在打印时显示
仅在不打印时显示

在屏幕上，您可以看到：

Shows both on-screen and when printing Shows only when not printing Shows both on-screen and when printing Shows only when printing 在屏幕上和打印时显示 仅在不打印时显示 打印时，您会看到：

Shows both on-screen and when printing Shows only when not printing Shows both on-screen and when printing Shows only when printing 在屏幕上和打印时显示 仅在打印时显示

---

注意示例中的

strong

元素。其可见性由其容器决定。

隐藏元素中的所有元素都将被隐藏，因此通过在主体上设置

display:none

，主体中的所有div也将被隐藏

另一种方法是使用打印类型的纸张，例如：

/* hide all divs */
div { display: none; }

/* show the hider divs, and the divs inside them */
#hider, #hider2, #hider3,
#hider div, #hider2 div, #hider3 div { display: block; }

---

谢谢你，我会调查的。它现在正在取出尸体，但是，它不会把跳水运动员带回到球场page@user3870118：在上面的评论发表五秒钟后，你似乎接受了答案——你知道发生了什么事情没有让其他元素重新出现在页面上吗？没有，我接受了答案，因为这似乎是正确的方法。我只是不明白为什么它不能让Div回来in@user3870118：明白了。在我们解决之前，可能不接受（其他人不太可能用接受的答案回答问题）。同时，让我看看是否可以举一个例子。谢谢，我也会考虑这个问题