特定のdivとその内容以外のすべてを隠す簡単な方法を探しています。
<html>
<head></head>
<body>
<div class="header">...</div>
<div class="menu">...</div>
<div class="content">...</div>
<div class="footer">...</div>
</body>.
</html>
だから、たとえば、私だけを印刷したい場合 div.content
、私はこのようにするでしょう:
.header, .menu, .footer {
display: none;
}
そしてレイアウトが複雑な場合、それは面倒になります。 CSSでこれを行うもっと簡単な方法はありますか?
回答:
回答№1は26@media print {
.noPrint {
display:none;
}
}
今度はクラスを適用する必要があります noPrint
あなたが印刷で隠したい要素に。
特に印刷専用のスタイルシートを使用し、そのメディア属性を print
.
例:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
回答№2の6
Webページを印刷するときの動作を定義する別のCSSファイルを割り当てます。
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
そしてそのファイルの中でちょうど定義する:
.header, .menu, .footer { display: none; }
回答№3の6
私はそれをcss3のやり方でやった:疑似クラスではなく直接の先祖を使う(子供たち)
/* hide all children of body that are not #container */
body > *:not(#container) {
display: none;
}
/* hide all children of #container that are not #content */
#container > *:not(#content) {
display: none;
}
/* and so on, until you reach a div that you want to print */
#content > *:not(#print_me) {
display: none;
}
これにより、非常に複雑なレイアウトでも、印刷したいもの以外のすべてを削除できます。 :htmlの将来の変更に注意するので、ここではあまり効率的ではありません。
回答№4の場合は0
あなたはクラスを使うことができます。
.classHide{display: none}
使用している言語によっては、== trueの場合、ヘッダー、メニュー、フッターにクラスを追加できます。
だからあなたは別のcssファイルを使う必要はありませんでした。
回答№5の場合は0
HTMLの構造(およびIE 6ではこれがサポートされていないため、サポートする必要があるブラウザ)によっては、最上位のdivをすべて非表示にして、表示したい部分をいくつか表示することもできます。
body > div {
display: none;
}
#content {
display: block;
}