웹 페이지를 인쇄할 때 인쇄 버튼과 같은 요소를 숨기려면 어떻게 해야 합니까?

웹 페이지 인쇄 중 요소 숨기기

웹 페이지 인쇄는 일반적인 작업이지만 원하지 않는 요소가 인쇄에 나타나면 답답할 수 있습니다. 인쇄물. 종종 문제를 일으키는 요소 중 하나는 인쇄 버튼 자체입니다. 인쇄된 페이지에서 인쇄 버튼을 제거하려는 경우 이를 수행하는 방법은 다음과 같습니다.

CSS 미디어 쿼리

Cascading Style Sheets의 미디어 쿼리( CSS)를 사용하면 특히 인쇄물에 대한 스타일을 정의할 수 있습니다. 인쇄할 때 요소를 숨기려면 @media 인쇄 규칙을 사용할 수 있습니다.

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

클래스 적용

CSS 규칙이 적용되면 다음이 필요합니다. 숨기려는 요소에 클래스를 추가합니다. 인쇄되지 않는 수업을 직접 할당할 수 있습니다:

<button class="no-print">Print</button>

또는 기존 수업에 추가할 수 있습니다:

<button class="btn btn-primary no-print">Print</button>

예

다음 예를 고려하십시오.

<p>Good Evening</p>
<button>

@media print {
    #print-button {
        display: none !important;
    }
}

페이지가 인쇄되면 "인쇄" 버튼이 숨겨지고 인쇄물에 "Good Evening"이라는 텍스트만 남게 됩니다.

참고:

!important 선언은 표시: 다른 스타일이 이를 무시하려고 해도 스타일이 적용되지 않습니다.

위 내용은 웹 페이지를 인쇄할 때 인쇄 버튼과 같은 요소를 숨기려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!