How do I hide an element when printing a web page?

I have a link on my webpage to print the webpage. However, the link is also visible in the printout itself.

Is there javascript or HTML code which would hide the link button when I click the print link?

Example:

 "Good Evening"
 Print (click Here To Print)

I want to hide this "Print" label when it prints the text "Good Evening". The "Print" label should not show on the printout itself.

---

In your stylesheet add:

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

Then add class='no-print' (or add the no-print class to an existing class statement) in your HTML that you don't want to appear in the printed version, such as your button. I got this to work with 'noPrint' instead of 'noprint' (lowercase).

---

The best practice is to use a style sheet specifically for printing , and and set its media attribute to print .

In it, show/hide the elements that you want to be printed on paper.

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

---

Bootstrap 3 has its own class for this called:

hidden-print

It is defined like this:

@media print {
  .hidden-print {
    display: none !important;
  }
}

You do not have to define it on your own.

---

In Bootstrap 4 this has changed to:

.d-print-none

链接地址: http://www.djcxy.com/p/87318.html

上一篇: 打印时字体颜色会改变

下一篇: 打印网页时如何隐藏元素？