Sử dụng CSS để ẩn nội dung trên bản in

Tôi đang tìm cách dễ dàng để ẩn mọi thứ ngoại trừ một số div nhất định và nội dung của nó.Sử dụng CSS để ẩn nội dung trên bản in

<html> 
    <head></head> 
    <body> 
    <div class="header">...</div> 
    <div class="menu">...</div> 
    <div class="content">...</div> 
    <div class="footer">...</div> 
    </body>. 
</html>

Vì vậy, ví dụ, nếu tôi muốn in chỉ div.content, tôi sẽ làm điều đó như thế này:

.header, .menu, .footer { 
    display: none; 
}

Và nếu bố trí phức tạp, nó trở nên lộn xộn. Có cách nào dễ dàng hơn để làm điều này với CSS?

Nguồn

2011-01-27 Dziamid

Bạn chỉ có thể in div mình muốn bằng cách làm theo bài viết! http://stackoverflow.com/questions/2255291/print-the-contents-of-a-div – BillDo168

tôi đã làm nó theo cách css3: sử dụng lớp không giả và tổ tiên trực tiếp (trẻ em)

/* 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; 
}

bằng cách này bạn có thể loại bỏ tất cả mọi thứ ngoại trừ những gì bạn muốn in ngay cả trong bố trí rất phức tạp. : không phải là rất hiệu quả ở đây bởi vì nó sẽ chăm sóc về bất kỳ sửa đổi trong tương lai của bạn html.

Nguồn

2011-02-17 00:04:27 Dziamid

@media print { 
.noPrint { 
    display:none; 
    } 
}

Bây giờ bạn cần áp dụng lớp noPrint cho các phần tử bạn muốn ẩn trong khi in.

Thực hành tốt để sử dụng bảng định kiểu dành riêng cho in và đặt thuộc tính phương tiện là print.

Ví dụ:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Nguồn

2011-01-27 13:33:09 Sarfraz

Đảm bảo thêm phần in sau khi tất cả các phần kiểu khác đã được chỉ định. Bằng cách đó, các câu lệnh in sẽ ghi đè lên các kiểu khác trong thời gian in. – Mike

câu hỏi cho biết: 'tìm kiếm một cách dễ dàng để ẩn tất cả mọi thứ ngoại trừ một số div' – Pooya

Đây phải là câu trả lời được chấp nhận. Nó là linh hoạt nhất trong tất cả các câu trả lời khác và không liên quan đến việc sử dụng JS hoặc sử dụng một số plugin JS để hiển thị các phần tử ẩn theo cách thủ công. – TinkerTenorSoftwareGuy

Gán một file CSS riêng biệt mà định nghĩa hành vi khi in một trang web.

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

và sau đó trong tập tin mà chỉ xác định:

.header, .menu, .footer { display: none; }

Nguồn

2011-01-27 13:33:54 Tr1stan

Bạn có thể sử dụng các lớp học.

.classHide{display: none}

Tùy thuộc vào ngôn ngữ bạn đang sử dụng, khi nếu == đúng, bạn có thể thêm lớp vào đầu trang, menu và chân trang.

Vì vậy, bạn sẽ không cần sử dụng tệp css khác.

Nguồn

2011-01-27 13:40:40 Thiago

Làm thế nào bạn sẽ nói những điều này để chỉ ẩn khi in bằng cách sử dụng bất cứ điều gì nhưng CSS? – BoltClock

Bạn chỉ sử dụng html + css? – Thiago

Điểm của tôi là bạn không thể sử dụng ngôn ngữ phía máy chủ để cho biết kiểu chỉ áp dụng khi in. Điều này là do việc in xảy ra ở phía máy khách, vì vậy máy chủ sẽ không biết gì cả. – BoltClock

Tùy thuộc vào cấu trúc HTML của bạn (và các trình duyệt bạn cần hỗ trợ, vì IE6 sẽ không hỗ trợ này), bạn có thể ẩn tất cả các div cấp cao nhất và chỉ hiển thị một/vài bạn muốn hiển thị:

body > div { 
    display: none; 
} 

#content { 
    display: block; 
}

Nguồn

2011-01-27 14:03:05 RoToRa

Sử dụng CSS để ẩn nội dung trên bản in

Trả lời

Các vấn đề liên quan