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功能。

希望它會工作..