根據按下的按鈕選擇不同的樣式表

我希望用戶能夠打印包含或不包含某個div中某些信息的文檔。我有2個樣式表，其中一個指定打印時我想隱藏的div類的樣式： .hide {display：none; }根據按下的按鈕選擇不同的樣式表

以下是選擇取決於傳遞的參數樣式表中的腳本：

function print(o) { 
    var head = document.getElementsByTagName('head')[0].innerHTML; 
    if (o == 'withinfo') { 
    head += '<link rel="stylesheet" href="printwithinfo.css" media="print" />'; 
} 
if (o == 'withoutinfo') { 
    head += '<link rel="stylesheet" href="printwithoutinfo.css" media="print" />'; 
} 
document.getElementsByTagName('head')[0].innerHTML = head; 
}

然後在我的HTML我有以下幾點：

<div class="hide">My Info</div>

和我的兩個按鈕的下面：

<input type="button" value="Print with info" onclick="print('withinfo');"> 

    <input type="button" value="Print without info" onclick="print('withoutinfo');">

不幸的是沒有任何反應，當我點擊鈕釦。你能讓我知道我做錯了什麼嗎？

來源

2013-04-17 user1977156

所以在默認情況下哪些CSS正在加載？ – dreamweiver

絕對必須有2個樣式表嗎？ –

@dreamweiver默認情況下，任何可以加載。讓我們說printiwithinfo.css。 – user1977156

首先，我高度推薦你改變你的func名字，coz print（）在Javascript中保留。

然後給我你的代碼seemd做工精細，試試這個：

<!doctype html> 
<html> 
<head></head> 


<body> 
    <script> 
     function Myprint(o) { 
      var head = document.getElementsByTagName('head')[0].innerHTML; 
      if (o == 'withinfo') { 
       head += '<link rel="stylesheet" href="b.css" media="print" />'; 
      } 
      if (o == 'withoutinfo') { 
       head += '<link rel="stylesheet" href="a.css" media="print" />'; 
      } 
      document.getElementsByTagName('head')[0].innerHTML = head; 
      window.print(); 
} 
    </script> 
     <div id="hide">My Info</div> 
     Always here 
    <input type="button" value="Print with info" onclick="Myprint('withinfo');" /> 
    <input type="button" value="Print without info" onclick="Myprint('withoutinfo');" /> 
</body> 
</html>

隨着a.css：

div{display:none;}

和B.css：

div{display:block;}

來源

2013-04-17 10:29:45 kante

你是一個明星！它像一個魅力。謝謝你的建議。 – user1977156

它似乎工作得很好。

您必須意識到，單擊任一按鈕時發生的唯一情況是樣式表被附加到頭部。由於樣式表僅適用於media =「print」，因此只有在由用戶或您激活打印時纔會應用樣式表。

如果你想激活它，你可以這樣做。

<input type="button" value="Print with info" onclick="print('withinfo');window.print();"></input> 
<input type="button" value="Print without info" onclick="print('withoutinfo');window.print();"></input>

如果您只是想測試應用的樣式表，則可以刪除鏈接標記的（media =「print」）部分。這將樣式表限制爲僅在「打印」中應用。

請注意：您的打印功能應改變名稱，因爲它會覆蓋window.print。

一個更好的選擇

只需使用1個樣式表「print.css」這是從一開始就加載並不會改變。

然後改變打印此

function print(o) { 
    document.getElementById("body").className = o; 
}

，並在樣式表中有以下

body.withinfo #hide { 
    display: block; 
} 

body.withoutinfo #hide { 
    display: none; 
}

這樣你就不必unloade以前的樣式表和唯一改變的事情就是在類身體元素。

來源

2013-04-17 10:28:32

他的打印函數生成問題導致它在window.print的相同範圍內。 – kante

是的，這是正確的行爲。 –

+1爲您的「更好的選擇」 –

根據按下的按鈕選擇不同的樣式表

回答

相關問題