JavaScript @media打印樣式表不起作用

Question

我已經開始嘗試制作一些簡單的HTML和CSS網頁，同時引入一些JavaScript。 我正在嘗試制作一個簡單的打印按鈕，當您打印該按鈕時不會顯示它。 我在SA周圍搜索了各種答案，並且看到了許多有關link media= "print" 。 在樣式表中將是一個類，您可以在其中編寫display: none或visibility: hidden 。 然后，您可以將其應用於按鈕。

問題是，當我嘗試執行此操作時，彈出頁面預覽時它不會變得不可見。 這是我的主要代碼：

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

<script type = "text/javascript">

function newPerson(firstname, lastname, age, gender, birthmonth, birthdate) {
this.firstname = firstname;
this.lastname = lastname;
this.age = age;
this.gender = gender;
this.birthmonth = birthmonth;
this.birthdate = birthdate;
this.birthyear = birthdayCalculate;
}
function birthdayCalculate() {
var date = new Date();
var CurYear = date.getFullYear()
var CurMonth = date.getMonth()
var birthyear = CurYear - this.age
if (this.birthmonth > CurMonth) {
    birthyear --
}
return birthyear
}

function testFunction(form) {
var firstName = form.firstName.value
var lastName = form.lastName.value
var Age = form.Age.value
var Gender = form.Gender.value
var birthMonth = form.birthMonth.value
var birthDate = form.birthDate.value

var new1 = new newPerson(firstName, lastName, Age, Gender, birthMonth, birthDate)
var person = new1.firstname + " " + new1.lastname + " is " + new1.age + " and is " +     new1.gender + " and was born on "
+ new1.birthmonth + "/" + new1.birthdate + "/" + new1.birthyear() + "." + "<br />"
document.write(person);

winVar = window.open();
winVar.document.write(person);
winVar.focus();
winVar.document.write(
"<input type='button' " +
"onClick= 'window.print();'" +
"value ='Print This Page' " +
"class = 'print' " +
"/>");}
</script>

我認為您可以告訴我使用的表格。 我認為不需要向您展示。 打印.css也非常簡單：

.print{
visibility: hidden
}

有人看到我的腳本有什么問題嗎？ 還有一點，我正在使用Google Chrome。

Answer 1

在這種情況下，css將無濟於事，而是使用javascript。 您必須執行以下操作：

假設這是您的打印按鈕<input type="button" value="print" onclick="this.setAttribute('hidden''hidden')"/>

使用setAttribute函數單擊按鈕時隱藏按鈕。

希望它能工作。