Скрыть кнопки при печати

Question

У меня есть страница, которая содержит в нижней 3 кнопки со следующим кодированием:

function printpage() { 
 
     //Get the print button and put it into a variable 
 
     var printButton = document.getElementById("printpagebutton"); 
 
     //Set the print button visibility to 'hidden' 
 
     printButton.style.visibility = 'hidden'; 
 
     //Print the page content 
 
     window.print() 
 
     printButton.style.visibility = 'visible'; 
 
    }

#options { 
 
\t align-content:center; 
 
\t align-items:center; 
 
    text-align: center; 
 
}

<div id="options"> 
 
<input type="submit" value="post news" > 
 
<input id="printpagebutton" type="button" value="print news" onclick="printpage()"/> 
 
<input type="button" value="re-enter the news"> 
 
</div>

мне удалось скрыть кнопку печати во время печати, но я не мог с другими.

Я искал интернет для решения, и на большинство вопросов ответил, добавив display:none; в css, но в итоге у меня есть 3 скрытые кнопки на экране. Я только хочу, чтобы кнопки были спрятаны во время печати. ​​

Ответ может быть простым, мои знания в веб-разработке удобны.

Благодарим вас заблаговременно.

Answer 1

Вы можете использовать запросы CSS @media. Например: будет применяться

@media print { 
 
    #printPageButton { 
 
    display: none; 
 
    } 
 
}

<button id="printPageButton" onClick="window.print();">Print</button>

стили, определенные в @media print блоке только при печати страницы. Вы можете проверить его, нажав кнопку печати в фрагменте; вы получите пустую страницу.

Answer 2

Вы можете использовать медиа-запрос CSS целевой печати:

@media print { 
    .hide-print { 
    display: none; 
    } 
} 

Answer 3

Назначить идентификатор для других 2 кнопок. Для кнопки POST NEWS вы можете установить идентификатор до postnews и RE-ENTER NEWS до reenterthenews; Тогда сделайте это

function printpage() { 

    //Get the print button and put it into a variable 
    var printButton = document.getElementById("printpagebutton"); 
    var postButton = document.getElementById("postnews"); 
    var reenterButton = document.getElementById("reenterthenews"); 

    //Set the button visibility to 'hidden' 
    printButton.style.visibility = 'hidden'; 
    postButton.style.visibility = 'hidden'; 
    reenterButton.style.visibility = 'hidden'; 

    //Print the page content 
    window.print() 

    //Restore button visibility 
    printButton.style.visibility = 'visible'; 
    postButton.style.visibility = 'visible'; 
    reenterButton.style.visibility = 'visible'; 

} 

HTML

<div id="options"> 
<input type="submit" id="postnews" value="post news" > 
<input id="printpagebutton" type="button" value="print news" onclick="printpage()"/> 
<input type="button" id="reenterthenews" value="re-enter the news"> 
</div>