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

Question

我正在创建一个带有可自定义打印设置的网页。发生的情况是，无论何时单击打印按钮，都会打开一个对话框（我用onclick（单击）属性和一些js）。对话框中有一些复选框，其名称如下：

• 删除菜单
• 删除边栏
• 删除链接和按钮
• 删除注释

因此，我想要的是，每当用户单击复选框时，链接的项目都会从@媒体打印查询。

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

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

Answer 1

相反，我建议您在项目中添加/删除类，并将其包含在打印CSS中。可以简单到：

.隐藏{显示：无；}

然后，在JavaScript中：

document.querySelector（'.comments'）.classList.add（'hidden'）；

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

Answer 2

工作：

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

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

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

祝大家好运。

函数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+=“.注释｛display:none；｝”；}style+=“}</style>”；document.getElementById（“div_for_style”）.innerHTML=样式；$（'#myModal'）.modal（'hide'）；}

<元字符集=“utf-8”><meta name=“viewport”content=“width=设备宽度，初始比例=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>这是边栏</p><p class=“links_buttons”>这是链接和按钮</p><p class=“comments”>这是评论</p></div><样式>@媒体打印{.hide_while_打印{显示：无；}}</style><div class=“container”><div class=“hide_while_print”>更新打印信息打印</div></div><!-- 模式--><div class=“modal fade”id=“myModal”role=“dialog”><div class=“modal-dialog”><!-- 模态内容--><div class=“modal-content”><div class=“modal-header”><button type=“button”class=“close”data-dismiss=“modal”>&times</按钮>打印信息</div><div class=“modal-body”>删除菜单<br/>删除侧边栏<br/>删除链接和按钮<br/><input type=“checkbox”id=“remove_comments”/>删除注释</div><div class=“modal-footer”>关闭</button><input type=“button”class=“btn btn-success btn-sm”onclick=“update_print（）；”value=“Submit”/></div></div></div></div><div id=“div_for_style”>

Answer 3

作为对这个：所提供的代码段可以从重构中受益，以避免常见缺陷：

1. 不要使用内联事件属性，现代方法是使用添加事件侦听器相反（如果你绝对必须支持旧浏览器，使用polyfill和bundler，但不要像那样编写源代码）。
2. 通过避免字符串串联和如果声明。有一种原生的修改方式元素类-通过类列表财产公开DOMTokenList（DOM令牌列表）方法，如添加或去除.
3. 避免使用内部HTML更新节点（例如，请参见，在这里和元素样式（可以使用风格属性以编程方式更新特定值）。

下面是处理上述问题的经过修改的代码片段（请注意HTML标记的更改）：

(() => {const$=（选择器）=>document.querySelector（选择器）；const$$=（选择器）=>document.querySelectorAll（选择器）；const-submitBtn=$（“#submit”）；const modal=$（“#myModal”）；const输入=$$（“输入[type=checkbox]”）；const hideClass=“hide_hile_print”；submitBtn.addEventListener（“点击”，（事件）=>{每个输入(({身份证件，选中的}) => {常数{类列表}=$（`.${id.replace（“删除_”，“”）}`）；选中的？add（hideClass）：classList.remove（hiteClass）；});});$（“#print”）.addEventListener（“click”，（）=>window.print（））；})();

<元字符集=“utf-8”><meta name=“viewport”content=“width=设备宽度，初始比例=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>这是边栏</p><p class=“links_buttons”>这是链接和按钮</p><p class=“comments”>这是评论</p></div><样式>@媒体打印{.hide_while_打印{显示：无；}}</style><div class=“container”><div class=“hide_while_print”>更新打印信息打印</div></div><!-- 模式--><div class=“modal fade”id=“myModal”role=“dialog”><div class=“modal-dialog”><!-- 模态内容--><div class=“modal-content”><div class=“modal-header”><button type=“button”class=“close”数据消除=“modal”>&times</按钮>打印信息</div><div class=“modal-body”>删除菜单<br/>删除侧边栏<br/>删除链接和按钮<br/><input type=“checkbox”id=“remove_comments”/>删除注释</div><div class=“modal-footer”>关闭提交</div></div></div></div>

---

在片段中，我跟踪$使用DOM API定义轻量级实用程序。如果您不使用Bootstrap（它将JQuery作为硬依赖性)$和$$实用程序可以让您避免仅仅为了选择元素而加载JQuery。

Answer 4

你可以使用：已检查:

@媒体打印{.checkbox-class：选中+.remove-me{显示：无；}}

记住类中的元素.删除-me应该是相邻的兄弟姐妹。这样地：

单击我<input type=“checkbox”id=“checkbox-id”class=“checkbox-class”><div class=“remove-me”>Lorem ipsum悲哀地坐在神圣的祭坛上。</div>

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