Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do I hide an element when printing a web page?
In this article, we will learn to hide an element when printing a web page using CSS and JavaScript. When printing a web page, you can suppress elements such as navigation menus, advertisements, and interactive elements that you do not require on paper and print only the required information.
Syntax
@media print {
selector {
display: none;
}
}
Different Approaches
The following are the two different approaches to hiding an element when printing a web page −
Method 1: Using CSS Media Query
The most common and efficient method to hide elements during printing is by using the @media print CSS rule. This enables you to specify styles that will only be applied when the page is being printed.
- Any element with the class no-print will be hidden when the page is printed.
- This rule only applies when the print dialog is activated.
Example
The following example demonstrates hiding elements using CSS media queries ?
<!DOCTYPE html>
<html>
<head>
<style>
.container {
padding: 20px;
font-family: Arial, sans-serif;
}
.no-print {
background-color: #f44336;
color: white;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
}
.print-content {
background-color: #4CAF50;
color: white;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
}
@media print {
.no-print {
display: none;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Sample Web Page</h1>
<div class="no-print">
This element will be hidden when printing (navigation, ads, etc.)
</div>
<div class="print-content">
This content will appear in the printout.
</div>
<div class="no-print">
Another element that won't be printed (footer, sidebar, etc.)
</div>
</div>
</body>
</html>
A web page displays with red boxes labeled as "no-print" elements and a green box for print content. When printed (Ctrl+P), only the green content box and heading will appear on the printout.
Method 2: Using JavaScript to Hide Elements Before Printing
For more control, we can hide the elements temporarily before opening the print dialog dynamically using JavaScript.
- The JavaScript approach hides the element before calling window.print().
- When printed, the item reverts to its default visibility.
Example
The following example demonstrates hiding elements before printing using JavaScript ?
<!DOCTYPE html>
<html>
<head>
<style>
.container {
padding: 20px;
font-family: Arial, sans-serif;
}
.hide-on-print {
background-color: #ff9800;
color: white;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
}
button {
background-color: #2196F3;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 10px 0;
}
button:hover {
background-color: #0b7dda;
}
</style>
</head>
<body>
<div class="container">
<h1>Print Page Example</h1>
<button onclick="printPage()">Print Page</button>
<div id="hide-before-print" class="hide-on-print">
This content will not appear in the printout.
</div>
<p>This paragraph will be printed normally.</p>
</div>
<script>
function printPage() {
var ele = document.getElementById("hide-before-print");
ele.style.display = "none";
window.print();
ele.style.display = "block";
}
</script>
</body>
</html>
A web page displays with a blue "Print Page" button, an orange box that will be hidden, and regular paragraph text. When the button is clicked, the print dialog opens with only the heading and paragraph visible.
Conclusion
Hiding elements when printing a webpage enhances readability and includes only relevant information. Use the @media print CSS rule for the most effective method, while JavaScript provides dynamic control for complex scenarios.
7K+ Views
