The media query is used to hide an element when printing a web pages. Use @media print query and set the visibility hidden to that element which need to hide at printing.
Example 1: In this example, hide the element h1 at printing time. To hide the element h1 use media query and set visibility:hidden.
<!DOCTYPE html> < html > < head > < title >Hide element at print</ title > < style > body { text-align:center; } h1 { color:green; } @media print { .noprint { visibility: hidden; } } </ style > </ head > < body > < h1 class = "noprint" >GeeksforGeeks</ h1 > < p >GeeksforGeeks: It is a computer science portal for geeks</ p > </ body > </ html > |
Output:
Before printing the page:
After printing the page:
Example 2: Tn this example, use media query to hide image element when print the web pages.
<!DOCTYPE html> < html > < head > < title >Hide element at printing</ title > < style > body { text-align:center; } h1 { color:green; } @media print { img { visibility: hidden; } } </ style > </ head > < body > < h1 >GeeksforGeeks</ h1 > < p >A computer science portal for geeks</ p > < img src = "gfg.png" alt = "image" > < style > .noprint { visibility: hidden; } </ style > </ body > </ html > |
Output:
Before printing the page:
After printing the page:
leave a comment
0 Comments