在 JavaScript 中使用媒体查询或在 CSS 中使用 if/else 语句

Question

我正在构建一个具有可自定义打印设置的网页。发生的情况是，每当单击打印按钮时，都会打开一个对话框（我使用onclick属性和一些 js）。 对话框有一些复选框，命名如下：

• 删除菜单
• 删除侧边栏
• 删除链接和按钮
• 删除评论

所以，我想要的是，每当用户点击复选框时，链接的项目就会从@media print查询中删除。

所以，我能想到的方法是使用 JavaScript 中的媒体查询或 css 中的条件语句。

有可能还是需要其他语言？

Answer 1

我建议改为向项目添加/删除类，并将它们包含在您的打印 CSS 中。 可以很简单：

.hidden {
  display: none;
}

然后，在您的 JavaScript 中：

document.querySelector('.comments').classList.add('hidden');

另请参阅： https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Answer 2

在职的：

• 单击更新打印信息按钮以更新打印信息，然后单击提交。

• 关闭模式后，单击打印按钮以找出更改。

我希望这段代码将来也能帮助很多用户。

大家好运。

 function update_print() { var style = "<style>@media print {"; if (document.getElementById('remove_menu').checked) { style += ".menu { display: none; }"; } if (document.getElementById('remove_sidebars').checked) { style += ".sidebars { display: none; }"; } if (document.getElementById('remove_links_buttons').checked) { style += ".links_buttons { display: none; }"; } if (document.getElementById('remove_comments').checked) { style += ".comments { display: none; }"; } style += "}</style>"; document.getElementById("div_for_style").innerHTML = style; $('#myModal').modal('hide'); }

 <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <div id="print_box"> <p class="menu">This is Menu</p> <p class="sidebars">This is Sidebar</p> <p class="links_buttons">This is Links & Buttons</p> <p class="comments">This is Comments</p> </div> <style> @media print {.hide_while_print { display: none; } } </style> <div class="container"> <div class="hide_while_print"> <button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#myModal">Update Print Info</button> <button type="button" class="btn btn-info btn-md" onclick="window.print();">Print</button> </div> </div> <;-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <;-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Print Information</h4> </div> <div class="modal-body"> <input type="checkbox" id="remove_menu" /> <label for="remove_menu">Remove Menu</label> <br /> <input type="checkbox" id="remove_sidebars" /> <label for="remove_sidebars">Remove sidebars</label> <br /> <input type="checkbox" id="remove_links_buttons" /> <label for="remove_links_buttons">Remove Links & Buttons</label> <br /> <input type="checkbox" id="remove_comments" /> <label for="remove_comments">Remove Comments</label> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <input type="button" class="btn btn-success btn-sm" onclick="update_print();" value="Submit" /> </div> </div> </div> </div> <div id="div_for_style"></div>

Answer 3

作为对此的补充答案：提供的代码段可以从重构中受益，以避免常见的陷阱：

1. 不要使用内联事件属性，现代方法是使用addEventListener代替（如果您绝对必须支持旧浏览器，请使用 polyfills 和 bundlers，但不要这样编写源代码）。
2. 通过避免字符串连接和if语句集使代码可维护。 有一种修改Element类的本地方法 - 通过classList属性公开DOMTokenList方法，如add或remove 。
3. 避免使用innerHTML来更新节点（例如，请参阅此处了解详细信息）和元素 styles（您可以使用style属性以编程方式更新特定值）。

下面是处理上述问题的重新处理的片段（注意 HTML 标记也发生了变化）：

 (() => { const $ = (selector) => document.querySelector(selector); const $$ = (selector) => document.querySelectorAll(selector); const submitBtn = $("#submit"); const modal = $("#myModal"); const inputs = $$("input[type=checkbox]"); const hideClass = "hide_while_print"; submitBtn.addEventListener("click", (event) => { inputs.forEach(({ id, checked }) => { const { classList } = $(`.${id.replace("remove_", "")}`); checked? classList.add(hideClass): classList.remove(hideClass); }); }); $("#print").addEventListener("click", () => window.print()); })();

 <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <div id="print_box"> <p class="menu">This is Menu</p> <p class="sidebars">This is Sidebar</p> <p class="links_buttons">This is Links & Buttons</p> <p class="comments">This is Comments</p> </div> <style> @media print {.hide_while_print { display: none; } } </style> <div class="container"> <div class="hide_while_print"> <button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#myModal">Update Print Info</button> <button id="print" type="button" class="btn btn-info btn-md">Print</button> </div> </div> <;-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Print Information</h4> </div> <div class="modal-body"> <input type="checkbox" id="remove_menu" /> <label for="remove_menu">Remove Menu</label> <br /> <input type="checkbox" id="remove_sidebars" /> <label for="remove_sidebars">Remove sidebars</label> <br /> <input type="checkbox" id="remove_links_buttons" /> <label for="remove_links_buttons">Remove Links & Buttons</label> <br /> <input type="checkbox" id="remove_comments" /> <label for="remove_comments">Remove Comments</label> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-success" data-dismiss="modal" id="submit">Submit</button> </div> </div> </div> </div>

---

在片段中，我使用 DOM $定义了一个轻量级实用程序。 如果您不使用 Bootstrap（将 JQuery 作为硬依赖项）， $和$$实用程序可以让您避免将 JQuery 仅加载到 select 元素。

Answer 4

您可以使用:checked ：

@media print {
  .checkbox-class:checked + .remove-me {
    display: none;
  }
}

请记住，带有 class .remove-me的元素应该是相邻的兄弟元素。 像这样：

<label for="checkbox-id">Click Me</label>
<input type="checkbox" id="checkbox-id" class="checkbox-class">

<div class="remove-me">
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>

在 Codepen 上检查它：编辑器视图调试模式