{"id":591,"date":"2024-12-28T17:50:48","date_gmt":"2024-12-28T09:50:48","guid":{"rendered":"https:\/\/www.laixuexila.com\/?p=591"},"modified":"2024-12-28T17:50:48","modified_gmt":"2024-12-28T09:50:48","slug":"%e5%8f%af%e4%bb%a5%e4%bd%bf%e7%94%a8-css-%e5%92%8c-javascript%e6%9d%a5%e8%a6%86%e7%9b%96%e9%bb%98%e8%ae%a4%e6%b5%8f%e8%a7%88%e5%99%a8%e7%9a%84%e6%89%93%e5%8d%b0%e8%ae%be%e7%bd%ae","status":"publish","type":"post","link":"https:\/\/www.laixuexila.com\/index.php\/2024\/12\/28\/%e5%8f%af%e4%bb%a5%e4%bd%bf%e7%94%a8-css-%e5%92%8c-javascript%e6%9d%a5%e8%a6%86%e7%9b%96%e9%bb%98%e8%ae%a4%e6%b5%8f%e8%a7%88%e5%99%a8%e7%9a%84%e6%89%93%e5%8d%b0%e8%ae%be%e7%bd%ae\/","title":{"rendered":"\u53ef\u4ee5\u4f7f\u7528\u00a0CSS\u00a0\u548c\u00a0JavaScript\u6765\u8986\u76d6\u9ed8\u8ba4\u6d4f\u89c8\u5668\u7684\u6253\u5370\u8bbe\u7f6e\u5417\uff1f"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">\u8981\u8986\u76d6\u9ed8\u8ba4\u6d4f\u89c8\u5668\u7684\u6253\u5370\u8bbe\u7f6e\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 <strong>CSS<\/strong> \u548c <strong>JavaScript<\/strong> \u6765\u5b9e\u73b0\u5bf9\u6253\u5370\u6837\u5f0f\u7684\u81ea\u5b9a\u4e49\u3002\u901a\u5e38\uff0c\u6d4f\u89c8\u5668\u4f1a\u6839\u636e\u9875\u9762\u7684\u5185\u5bb9\u548c\u5e03\u5c40\u81ea\u52a8\u51b3\u5b9a\u6253\u5370\u6548\u679c\uff0c\u4f46\u662f\u4f60\u53ef\u4ee5\u901a\u8fc7\u4ee5\u4e0b\u65b9\u6cd5\u6765\u63a7\u5236\u6253\u5370\u6837\u5f0f\u3001\u5e03\u5c40\u3001\u989c\u8272\u7b49\u3002<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">1. <strong>\u4f7f\u7528 <code>@media print<\/code> \u5a92\u4f53\u67e5\u8be2\u6765\u5b9a\u4e49\u6253\u5370\u6837\u5f0f<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5728 CSS \u4e2d\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 <code>@media print<\/code> \u5a92\u4f53\u67e5\u8be2\u6765\u8bbe\u7f6e\u6253\u5370\u65f6\u7684\u6837\u5f0f\u3002\u8fd9\u4e9b\u6837\u5f0f\u4ec5\u4f1a\u5728\u6253\u5370\u65f6\u5e94\u7528\uff0c\u53ef\u4ee5\u5e2e\u52a9\u4f60\u63a7\u5236\u9875\u9762\u5982\u4f55\u5728\u6253\u5370\u4e2d\u663e\u793a\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u793a\u4f8b\uff1a<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* \u6253\u5370\u65f6\u6837\u5f0f *\/\n@media print {\n    body {\n        font-size: 12pt; \/* \u8bbe\u7f6e\u6253\u5370\u5b57\u4f53\u5927\u5c0f *\/\n        line-height: 1.5;\n    }\n\n    .no-print {\n        display: none; \/* \u9690\u85cf\u4e0d\u9700\u8981\u6253\u5370\u7684\u5143\u7d20 *\/\n    }\n\n    .print-header {\n        display: block;\n        text-align: center;\n        font-weight: bold;\n        font-size: 16pt;\n    }\n\n    \/* \u8ba9\u9875\u9762\u5185\u5bb9\u5168\u5bbd *\/\n    .content {\n        width: 100%;\n        margin: 0;\n        padding: 0;\n    }\n\n    \/* \u6253\u5370\u65f6\u9690\u85cf\u80cc\u666f *\/\n    body {\n        background: white;\n    }\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u89e3\u91ca\uff1a<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>@media print<\/code> \u4e2d\u7684\u6837\u5f0f\u4ec5\u5728\u6253\u5370\u65f6\u5e94\u7528\u3002<\/li>\n\n\n\n<li><code>.no-print<\/code> \u7c7b\u88ab\u8bbe\u7f6e\u4e3a <code>display: none;<\/code>\uff0c\u4ee5\u4fbf\u5728\u6253\u5370\u65f6\u9690\u85cf\u67d0\u4e9b\u5143\u7d20\uff08\u4f8b\u5982\u5e7f\u544a\u6216\u4e0d\u9700\u8981\u6253\u5370\u7684\u5bfc\u822a\u6761\uff09\u3002<\/li>\n\n\n\n<li>\u4f60\u53ef\u4ee5\u8c03\u6574\u5b57\u4f53\u5927\u5c0f\u3001\u989c\u8272\u3001\u9875\u8fb9\u8ddd\u7b49\uff0c\u786e\u4fdd\u9875\u9762\u5728\u6253\u5370\u65f6\u7b26\u5408\u9700\u6c42\u3002<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">2. <strong>\u901a\u8fc7 <code>window.print()<\/code> \u5728 JavaScript \u4e2d\u89e6\u53d1\u6253\u5370<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript \u5141\u8bb8\u4f60\u5728\u7528\u6237\u89e6\u53d1\u7279\u5b9a\u64cd\u4f5c\u65f6\u8c03\u7528\u6253\u5370\u529f\u80fd\u3002\u4f60\u53ef\u4ee5\u4f7f\u7528 <code>window.print()<\/code> \u65b9\u6cd5\u6253\u5f00\u6253\u5370\u5bf9\u8bdd\u6846\uff0c\u7136\u540e\u89e6\u53d1\u6d4f\u89c8\u5668\u7684\u6253\u5370\u884c\u4e3a\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u793a\u4f8b\uff1a<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>function triggerPrint() {\n    window.print(); \/\/ \u6253\u5f00\u6253\u5370\u5bf9\u8bdd\u6846\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u5728 HTML \u4e2d\u6dfb\u52a0\u4e00\u4e2a\u6309\u94ae\u6765\u89e6\u53d1\u6253\u5370\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;button onclick=\"triggerPrint()\"&gt;\u6253\u5370\u9875\u9762&lt;\/button&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u89e3\u91ca\uff1a<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5f53\u70b9\u51fb\u6309\u94ae\u65f6\uff0c<code>triggerPrint()<\/code> \u51fd\u6570\u4f1a\u8c03\u7528 <code>window.print()<\/code>\uff0c\u8fd9\u4f1a\u6253\u5f00\u6d4f\u89c8\u5668\u7684\u6253\u5370\u5bf9\u8bdd\u6846\uff0c\u5141\u8bb8\u7528\u6237\u9009\u62e9\u6253\u5370\u673a\u3001\u9875\u9762\u65b9\u5411\u7b49\u3002<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">3. <strong>\u4f7f\u7528 JavaScript \u4fee\u6539\u6253\u5370\u6837\u5f0f<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5982\u679c\u9700\u8981\u52a8\u6001\u4fee\u6539\u6253\u5370\u6837\u5f0f\u6216\u505a\u66f4\u591a\u5b9a\u5236\uff0c\u4f60\u53ef\u4ee5\u5728\u8c03\u7528 <code>window.print()<\/code> \u4e4b\u524d\u901a\u8fc7 JavaScript \u66f4\u6539\u9875\u9762\u6837\u5f0f\u3002\u4f8b\u5982\uff0c\u9690\u85cf\u67d0\u4e9b\u5143\u7d20\u3001\u4fee\u6539\u9875\u9762\u5e03\u5c40\u6216\u6539\u53d8\u989c\u8272\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u793a\u4f8b\uff1a\u5728\u6253\u5370\u4e4b\u524d\u8c03\u6574\u9875\u9762\u6837\u5f0f<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>function customizePrint() {\n    \/\/ \u9690\u85cf\u67d0\u4e9b\u5143\u7d20\n    document.querySelector('.header').style.display = 'none';\n\n    \/\/ \u4fee\u6539\u9875\u9762\u5b57\u4f53\n    document.body.style.fontSize = '14pt';\n\n    \/\/ \u89e6\u53d1\u6253\u5370\n    window.print();\n\n    \/\/ \u6253\u5370\u7ed3\u675f\u540e\u6062\u590d\u539f\u6837\n    document.querySelector('.header').style.display = 'block';\n    document.body.style.fontSize = ''; \/\/ \u6062\u590d\u9ed8\u8ba4\u5b57\u4f53\u5927\u5c0f\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u5728 HTML \u4e2d\u4f7f\u7528\u8fd9\u4e2a\u529f\u80fd\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;button onclick=\"customizePrint()\"&gt;\u6253\u5370\u5e76\u81ea\u5b9a\u4e49&lt;\/button&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u89e3\u91ca\uff1a<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>customizePrint()<\/code> \u51fd\u6570\u53ef\u4ee5\u5728\u6253\u5370\u524d\u4fee\u6539\u9875\u9762\u5143\u7d20\u7684\u6837\u5f0f\u3002\u4f8b\u5982\uff0c\u9690\u85cf\u4e0d\u9700\u8981\u6253\u5370\u7684 <code>.header<\/code> \u5143\u7d20\uff0c\u6216\u8005\u8c03\u6574\u5b57\u4f53\u5927\u5c0f\u3002<\/li>\n\n\n\n<li>\u8c03\u7528 <code>window.print()<\/code> \u6253\u5f00\u6253\u5370\u5bf9\u8bdd\u6846\u3002<\/li>\n\n\n\n<li>\u6253\u5370\u5b8c\u6210\u540e\uff0c\u6062\u590d\u9875\u9762\u7684\u9ed8\u8ba4\u6837\u5f0f\u3002<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">4. <strong>\u8986\u76d6\u9ed8\u8ba4\u7684\u6253\u5370\u8bbe\u7f6e\uff08\u4f8b\u5982\u9875\u9762\u5927\u5c0f\u3001\u8fb9\u8ddd\u7b49\uff09<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e00\u4e9b\u6d4f\u89c8\u5668\u5141\u8bb8\u4f60\u8c03\u6574\u6253\u5370\u9875\u9762\u7684\u8bbe\u7f6e\uff0c\u4f8b\u5982\u7eb8\u5f20\u5927\u5c0f\u3001\u8fb9\u8ddd\u3001\u9875\u7709\u548c\u9875\u811a\u7b49\u3002\u4f60\u53ef\u4ee5\u5728 CSS \u4e2d\u5b9a\u4e49\u67d0\u4e9b\u8bbe\u7f6e\uff0c\u4f46\u6d4f\u89c8\u5668\u7684\u6253\u5370\u5bf9\u8bdd\u6846\u4ecd\u7136\u5141\u8bb8\u7528\u6237\u81ea\u5b9a\u4e49\u8bbe\u7f6e\uff08\u4f8b\u5982\u6253\u5370\u9875\u9762\u7684\u9875\u8fb9\u8ddd\uff09\u3002\u4f60\u53ef\u4ee5\u901a\u8fc7\u4ee5\u4e0b\u65b9\u5f0f\u6765\u5c3d\u91cf\u63a7\u5236\u8fd9\u4e9b\u8bbe\u7f6e\uff1a<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u793a\u4f8b\uff1a\u8bbe\u7f6e\u6253\u5370\u7684\u9875\u8fb9\u8ddd\u548c\u9875\u9762\u5927\u5c0f<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>@media print {\n    \/* \u8bbe\u7f6e\u9875\u9762\u7684\u8fb9\u8ddd *\/\n    @page {\n        margin: 1in; \/* \u8bbe\u7f6e\u8fb9\u8ddd\u4e3a 1 \u82f1\u5bf8 *\/\n    }\n\n    \/* \u4fee\u6539\u9875\u9762\u5185\u5bb9\u7684\u5e03\u5c40 *\/\n    .content {\n        width: 100%;\n        max-width: 100%;\n        padding: 0;\n    }\n\n    \/* \u53ef\u9009\uff1a\u8bbe\u7f6e\u9875\u9762\u65b9\u5411\uff08\u6a2a\u5411\u6216\u7eb5\u5411\uff09 *\/\n    @page {\n        size: A4 landscape; \/* \u8bbe\u7f6e A4 \u7eb8\u5f20\u6a2a\u5411\u6253\u5370 *\/\n    }\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u89e3\u91ca\uff1a<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4f7f\u7528 <code>@page<\/code> \u6765\u8bbe\u7f6e\u6253\u5370\u9875\u9762\u7684\u8fb9\u8ddd\u3001\u5927\u5c0f\u548c\u65b9\u5411\u3002<\/li>\n\n\n\n<li><code>size: A4 landscape;<\/code> \u8bbe\u7f6e\u7eb8\u5f20\u4e3a A4 \u5927\u5c0f\u5e76\u4f7f\u7528\u6a2a\u5411\u6253\u5370\u3002<\/li>\n\n\n\n<li><code>margin: 1in;<\/code> \u8bbe\u7f6e\u9875\u9762\u7684\u8fb9\u8ddd\u4e3a 1 \u82f1\u5bf8\uff0c\u901a\u5e38\u4f1a\u5f71\u54cd\u6253\u5370\u65f6\u7684\u9875\u8fb9\u8ddd\u3002<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">5. <strong>\u9690\u85cf\u6d4f\u89c8\u5668\u9ed8\u8ba4\u7684\u9875\u7709\u548c\u9875\u811a<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5927\u591a\u6570\u6d4f\u89c8\u5668\u4f1a\u5728\u6253\u5370\u9875\u9762\u65f6\u81ea\u52a8\u6dfb\u52a0\u9875\u7709\u548c\u9875\u811a\uff08\u4f8b\u5982\u9875\u9762\u53f7\u7801\u3001\u65e5\u671f\u7b49\uff09\u3002\u5982\u679c\u4f60\u4e0d\u60f3\u663e\u793a\u8fd9\u4e9b\u4fe1\u606f\uff0c\u53ef\u4ee5\u5c1d\u8bd5\u901a\u8fc7 CSS \u8986\u76d6\u4e00\u4e9b\u9ed8\u8ba4\u7684\u6253\u5370\u8bbe\u7f6e\uff0c\u5c3d\u7ba1\u8fd9\u5e76\u4e0d\u603b\u662f\u6709\u6548\uff0c\u53d6\u51b3\u4e8e\u6d4f\u89c8\u5668\u7684\u5b9e\u73b0\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u793a\u4f8b\uff1a<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>@media print {\n    \/* \u9690\u85cf\u9875\u7709\u548c\u9875\u811a *\/\n    header, footer {\n        display: none;\n    }\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u89e3\u91ca\uff1a<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>header<\/code> \u548c <code>footer<\/code> \u5728\u6253\u5370\u65f6\u88ab\u8bbe\u7f6e\u4e3a <code>display: none;<\/code>\uff0c\u4ece\u800c\u9690\u85cf\u5b83\u4eec\u3002<\/li>\n\n\n\n<li>\u4f46\u9700\u8981\u6ce8\u610f\uff0c\u4e0d\u540c\u6d4f\u89c8\u5668\u7684\u884c\u4e3a\u53ef\u80fd\u4e0d\u540c\uff0c\u90e8\u5206\u6d4f\u89c8\u5668\u53ef\u80fd\u4e0d\u4f1a\u5b8c\u5168\u9690\u85cf\u9ed8\u8ba4\u7684\u9875\u7709\u548c\u9875\u811a\u3002<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u603b\u7ed3\uff1a<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u8981\u8986\u76d6\u9ed8\u8ba4\u7684\u6d4f\u89c8\u5668\u6253\u5370\u8bbe\u7f6e\uff0c\u4e3b\u8981\u901a\u8fc7 <strong>CSS \u5a92\u4f53\u67e5\u8be2 <code>@media print<\/code><\/strong> \u6765\u8c03\u6574\u6253\u5370\u65f6\u7684\u5e03\u5c40\u3001\u5b57\u4f53\u3001\u989c\u8272\u7b49\u6837\u5f0f\u3002\u4f60\u8fd8\u53ef\u4ee5\u4f7f\u7528 <strong>JavaScript<\/strong> \u6765\u5728\u6253\u5370\u524d\u52a8\u6001\u4fee\u6539\u6837\u5f0f\uff0c\u6216\u76f4\u63a5\u8c03\u7528 <code>window.print()<\/code> \u6765\u89e6\u53d1\u6253\u5370\u5bf9\u8bdd\u6846\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>CSS<\/strong> \u53ef\u4ee5\u7528\u6765\u63a7\u5236\u9875\u9762\u7684\u5e03\u5c40\u3001\u5b57\u4f53\u3001\u9690\u85cf\u5143\u7d20\u3001\u8c03\u6574\u8fb9\u8ddd\u7b49\u3002<\/li>\n\n\n\n<li><strong>JavaScript<\/strong> \u53ef\u4ee5\u52a8\u6001\u8c03\u6574\u9875\u9762\u6837\u5f0f\uff0c\u5e76\u5728\u6253\u5370\u65f6\u63a7\u5236\u54ea\u4e9b\u5185\u5bb9\u88ab\u6253\u5370\u3001\u5982\u4f55\u6253\u5370\u3002<\/li>\n\n\n\n<li>\u5c3d\u91cf\u4f7f\u7528 <code>@media print<\/code> \u7ed3\u5408 <code>@page<\/code> \u6765\u8bbe\u7f6e\u9875\u9762\u5c3a\u5bf8\u548c\u8fb9\u8ddd\uff0c\u786e\u4fdd\u6253\u5370\u6548\u679c\u7b26\u5408\u8981\u6c42\u3002<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fd9\u4e9b\u65b9\u6cd5\u53ef\u4ee5\u5e2e\u52a9\u4f60\u5b9e\u73b0\u9ad8\u5ea6\u81ea\u5b9a\u4e49\u7684\u6253\u5370\u5e03\u5c40\uff0c\u786e\u4fdd\u5185\u5bb9\u6309\u7167\u4f60\u7684\u9700\u6c42\u8fdb\u884c\u6253\u5370\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u8981\u8986\u76d6\u9ed8\u8ba4\u6d4f\u89c8\u5668\u7684\u6253\u5370\u8bbe\u7f6e\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 CSS \u548c JavaScript \u6765\u5b9e\u73b0\u5bf9\u6253\u5370\u6837\u5f0f\u7684\u81ea\u5b9a\u4e49\u3002\u901a\u5e38\uff0c\u6d4f\u89c8 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[55],"tags":[],"class_list":["post-591","post","type-post","status-publish","format-standard","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/591","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/comments?post=591"}],"version-history":[{"count":1,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/591\/revisions"}],"predecessor-version":[{"id":592,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/591\/revisions\/592"}],"wp:attachment":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/media?parent=591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/categories?post=591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/tags?post=591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}