Thay đổi thuộc tính CSS cụ thể của phương tiện truyền thông từ Javascript

Question

Tôi có thuộc tính CSS (phông chữ) mà tôi cần để có thể thay đổi từ Javascript (kéo xuống). Tuy nhiên, phông chữ này chỉ nên được sử dụng khi in (@media print).

Vì vậy, javascript không thể thay đổi giá trị của phông chữ, vì điều đó cũng sẽ ảnh hưởng đến chế độ xem màn hình. Có cách nào để thay đổi CHỈ phiên bản in của thuộc tính phông chữ không?

Hoặc có cách nào để có thuộc tính CSS là tham chiếu đến thuộc tính khác không?

Bằng cách đó, trong CSS in, tôi có thể nói phông chữ: printfont và phông chữ CSS màn hình: 12. Và sau đó thay đổi giá trị của printfont, và nó sẽ chỉ thay đổi phông chữ khi in.

cảm ơn.

EDIT: Vấn đề là tôi cần có thể thay đổi kích thước phông chữ mà tài liệu được in tại từ kéo xuống, nhưng tôi không muốn thay đổi kích thước phông chữ mà tài liệu được hiển thị tại.

Answer 1

có vẻ như những gì bạn muốn làm là myabe chỉ cần thay đổi hoặc thêm một lớp đến mục với JS

<p class="inrto comicSans">this is the text to change</p> 

@screen p.intro {font-family:verdana;} 

@print p.comicSans {font-family:comic-sans;} 

Answer 2

Đó là một tình trạng khó xử thú vị bạn đã diễn ra ở đó. Trên đỉnh đầu của tôi, điều duy nhất tôi có thể nghĩ đến là thêm một thẻ mới vào tiêu đề mà kích thước phông chữ của bạn được khai báo với! Ví dụ: trong thẻ đầu của bạn:

<style type="text/css" media="print"> 

.printfont { 
    font-size: 16px !important; 
} 

</style> 

Điều này sẽ đảm bảo rằng kích thước phông chữ mới sẽ được ưu tiên.

Sau đây là một ví dụ rất nhanh chóng như thế nào bạn có thể thực hiện điều này với javascript

<script type="text/javascript"> 

    var inlineMediaStyle = null; 

    function changeMediaStyle() 
    { 
     var head = document.getElementsByTagName('head')[0]; 
     var newStyle = document.createElement('style'); 
     newStyle.setAttribute('type', 'text/css'); 
     newStyle.setAttribute('media', 'print'); 
     newStyle.appendChild(document.createTextNode('.printFont { font-size: 16px !important;}')); 

     if (inlineMediaStyle != null) 
     { 
      head.replaceChild(newStyle, inlineMediaStyle) 
     } 
     else 
     { 
      head.appendChild(newStyle); 
     } 
     inlineMediaStyle = newStyle; 
    } 

</script> 

Chỉ cần đảm bảo rằng bạn có onchange = "changeMediaStyle()" như là một thuộc tính trên thả xuống của bạn. Ngoài ra, như một tuyên bố từ chối trách nhiệm trong ví dụ của tôi, tôi không kế toán những thứ như rò rỉ bộ nhớ, vì vậy bạn sẽ phải tự mình giải quyết những vấn đề đó.

Đối với câu hỏi thay thế của bạn, theo như tôi biết, không có phương pháp nào để khai báo/sử dụng các biến CSS cơ bản. Tuy nhiên, hiện nay là một đề nghị không cho nó: http://disruptive-innovations.com/zoo/cssvariables/

Answer 3

Bạn chỉ có thể sử dụng JavaScript để chuyển lớp, và có

@print { 
    .myPrintClass { font-family: serif; } 
} 
@screen { 
    .defaultClass { font-family: sans-serif; } 
} 

Answer 4

Trong khi các giải pháp dựa trên lớp sẽ hoàn toàn làm việc, bạn cũng có thể sử dụng Javascript để tự động thêm thẻ <link> mới vào trang. Ví dụ, nếu bạn có:

stylesheet1.css:

@print * {font-family:verdana;} 

stylesheet2.css:

@print * {font-family:comicSans;} 

Sau đó, bạn có thể sử dụng jQuery để làm điều gì đó như:

$(document.body).append("<link href='stylesheet2.css'/>"); 

(bạn có thể làm điều đó mà không cần jQuery quá, nhưng tôi quên cú pháp đó và quá lười biếng để tìm nó lên; -)).

Tuy nhiên, nếu bạn chỉ thay đổi số lượng nhỏ, một biểu định kiểu đơn + các lớp khác nhau có lẽ là cách tốt nhất để đi; giải pháp thẻ mới <link> chỉ đáng giá nếu bạn có nhiều thay đổi về phong cách khác nhau xảy ra.