ページの残りの部分に影響を与えずに、CSS を使用して特定の Div のみを印刷するにはどうすればよいですか?

他のページコンテンツに影響を与えずに特定の div を印刷する

ページのコンテンツの残りの部分を中断せずに特定の div を印刷するタスクを達成できます。 CSSを使用して。これを実現する方法は次のとおりです。

CSS のみの解決策:

次の CSS コード ブロックを実装します。

@media print {
  body {
    visibility: hidden;
  }
  #section-to-print {
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
  }
}

方法動作します:

この CSS メディア クエリは特定のスタイルを有効にしますページの印刷時。 body 要素全体が非表示になり、ID が「section-to-print」の div だけが表示されます。さらに、その div はページの左上隅に絶対に配置され、正しく印刷されます。

CSS を使用する利点:

• シンプルで最小限のコーディングを必要とする信頼性の高いソリューション。
• CSS 可視性プロパティは継承と子孫の両方をサポートしており、選択的に非表示または表示を行うことができます。
• 絶対配置により、印刷レイアウトを制御し、目的の div が正しく印刷されるようにします。

注: ブラウザの印刷で印刷スタイルを常にテストしてください。プレビューして、意図したとおりに動作することを確認します。 display:none の使用などの代替アプローチはより複雑になる可能性があり、ページ構造の変更が必要になる場合があります。

以上がページの残りの部分に影響を与えずに、CSS を使用して特定の Div のみを印刷するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。