Javascript 如何判断页面是否在打印视图中？

我在FAQ页面中使用CSS

display

属性从

none

到

block

的简单切换。但是，我希望页面在打印时显示所有内容。现在发生的事情是，如果您转到页面并转到打印模式，它将打开所有已关闭的项，因为我已将此代码添加到print.css样式表中

.faq
{
    display:block;
}

但是，如果打开一个项目，再次将其关闭，然后转到打印模式，则该项目将保持关闭状态

我的JS代码看起来像这样

`var divNum=新数组（“常见问题解答1”、“常见问题解答2”、“常见问题解答3”、“常见问题解答4”、“常见问题解答5”、“常见问题解答6”、“常见问题解答7”、“常见问题解答8”、“常见问题解答9”、“常见问题解答10”、“常见问题解答11”、“常见问题解答12”、“常见问题解答13”）

函数openClose（theID）{
对于（var i=0；i

HTML是这样的

<a class="faq" onClick="openClose('faq1')">Question?</a><br />
<p id="faq1" class="faq">Answer</p>

问题？

回答

---

当我进入打印模式时，如何确保所有内容都已打开？

我将使用CSS定义类，然后简单地使用JS切换类，而不是直接使用JS代码操纵元素的显示状态

如果您的类仅为@media screen定义，那么您就不必担心任何常见问题解答条目的当前显示状态

编辑：例如，在CSS文件中：

@media screen .faq.open {
display: block;
}

@media screen .faq {
display: none;
}

然后，您的JS看起来像：

function openClose(theID) {
    for (var i = 0; i < divNum.length; i++) {
        if (divNum[i] == theID) {
            if (document.getElementById(divNum[i]).className.match(new RegExp('(\\s|^)open(\\s|$)'))) { document.getElementById(divNum[i]).className = ele.className.replace(new RegExp('(\\s|^)open(\\s|$)'), ' '); }
            else { document.getElementById(divNum[i]).className += " open" }
        }
    }
}

函数openClose（theID）{
对于（var i=0；i

---

注意，我还没有测试过这个，所以可能有一些语法错误。此外，我的大多数项目已经包含jQuery，因此我通常使用的方法是更干净的代码。我没有在这里使用jQuery，因为您没有在代码示例中使用它。

我也这么认为，但它似乎不是这样工作的。我在Site.css和print.css中都有代码

@media print{p.faq，span.faq{display:block；}}

，如果JS函数没有修改它们，它会自动打开它们，如果发生这种情况，他们的打印视图由他们在页面上的视图定义。如果您仍然直接使用JS设置显示状态，它将覆盖外部样式表中定义的任何样式。Doing object.display='none'被认为与内联样式处于相同的级联级别）。这就是为什么我建议在FAQ条目上切换一个类。我会用一个例子来更新我的答案。

function openClose(theID) {
    for (var i = 0; i < divNum.length; i++) {
        if (divNum[i] == theID) {
            if (document.getElementById(divNum[i]).className.match(new RegExp('(\\s|^)open(\\s|$)'))) { document.getElementById(divNum[i]).className = ele.className.replace(new RegExp('(\\s|^)open(\\s|$)'), ' '); }
            else { document.getElementById(divNum[i]).className += " open" }
        }
    }
}