將CSS應用到打印的鏈接

我有一些黑色文本的鏈接。根據用戶在下拉列表中選擇的內容，我應用以下CSS來更改匹配鏈接。如果用戶選擇打印他們正在查看的視圖，那麼相同的鏈接將以黑色文本打印出來。我怎樣才能讓CSS繼承到打印視圖，以便用戶看到與他們在屏幕上看到的相同的顏色？將CSS應用到打印的鏈接

$this.find('a').css("color", "#bfbfbf"); 
$this.find('.fa-play').css("color", "#bfbfbf"); 
$this.find('.fa-check-circle').css("color", "#bfbfbf");

來源

2017-06-20 Wannabe

[使用樣式表，幷包裝在'@media打印{...}'那些款式]（https://developer.mozilla.org/en-US/docs/Web/CSS/@media ） - 但是，您不能使用內聯樣式的媒體查詢。 – Blazemonger

用戶在下拉菜單中的選項是否有限？你可能不得不有一個單獨的樣式表和添加類以及更改CSS。 – disinfor

@Blazemonger OP可能會提出一個不同的問題，因爲基於選擇的值在標記中發生變化。 – disinfor

下面的代碼將影響任何元件的CSS內部，同時在打印模式中：

@media print { 
    span { 
     color: black; 
    } 
}

在上述例子中

，任何跨度的顏色會變黑上打印模式。

編輯：2017年10月28日 根據評論@TamirNahum建議，我已經想通了。以下是完整的答案。

jQuery.addClass會將類'tailoredLink'注入到與下拉選擇相匹配的每個元素中。

$this.find('a').css("color", "#bfbfbf").addClass("tailoredLink"); 
$this.find('.fa-play').css("color", "#bfbfbf").addClass("tailoredLink"); 
$this.find('.fa-check-circle').css("color", "#bfbfbf").addClass("tailoredLink");

然後，當用戶選擇打印頁面時，以下CSS將以灰色顯示「定製鏈接」。

@media print { 
    .tailoredLink{ 
     color: gray; 
    } 
}

來源

2017-06-20 19:07:09 TamirNahum

這可能無法正常工作，因爲值根據用戶選擇的內容而動態變化。或者至少似乎是這樣。 – disinfor

我會用它與一些jQuery代碼來設置所選顏色的類。例如，如果用戶選擇「紅色」 - 「紅色」類將被添加到「body」元素。然後，進入CSS我會這樣做： @media print {.red span {color：black}} – TamirNahum

是的，請參閱我對該問題的原始評論。如果您希望它完整，您應該將jQuery添加到您的答案中。 – disinfor

將CSS應用到打印的鏈接

回答

相關問題