Используйте JavaScript для изменения стилей отображения (CSS), не влияя на стили печати

Question

У меня есть веб-приложение, которое использует отдельную таблицу стилей печати для управления внешним видом страницы, когда она выходит из принтера. Это работало замечательно, пока я недавно не сделал некоторые улучшения Javascript для сайта. Одно из этих улучшений позволяет пользователю заморозить заголовок страницы и навигацию, а также заголовки таблиц. Javascript за этим делает некоторые хитрости CSS, чтобы заморозить элементы на экране. К сожалению, применение position: fixed к моему заголовку (например) заставляет его печатать на каждой странице, и это нежелательный эффект. Как я могу использовать Javascript для настройки стилей элементов на стороне клиента, не влияя на стиль печати?

@media print { #foo { color: blue; } }               /* Print definition */
@media screen { #foo { color: green; } }             /* Display definition */
document.getElementById('foo').style.color = 'red';  /* Overrides both! */

Answer 1

Вместо изменения свойств ваших элементов с помощью этого:

document.getElementById('foo').style.color = 'red'; 

добавьте новый элемент <style>, например:

$('<style>@media screen { #foo { color: green; } }</style>').appendTo('head');

Было бы лучше объединить все вашинеобходимые изменения в один <style> элемент, если это возможно.

Answer 2

Добавьте !important к своим правилам печати. ​​

Answer 3

Нет хорошего решения!В конечном итоге я использовал функции onbeforeprint и onafterprint в IE (я здесь нахожусь в том положении, что у нас есть только пользователи IE), чтобы "разморозить" и "заморозить" элементы ...

window.onbeforeprint = function() {
  document.getElementById('foo').style.position = 'static';
}

window.onload = window.onafterprint = function() {
  var el = document.getElementById('foo');
  // Get element position and size
  // Set left/top/width/height properties
  // Set position to fixed
  el.style.position = 'fixed';
}

Answer 4

Вы можете попробовать это @media print {#foo {color: blue! Важный;}}

Проблема в том, что javascript .style.something редактирует встроенный css элемента, поэтому он будет переопределять обычные правила класса css / id.

Или вы можете работать склассы.document.getElementById ('foo'). className = 'redText';

и сохраните .redText в своем обычном CSS-файле (а не в печатном), что намного лучше, чем заполнение вашей печатной CSS! важными правилами.

Answer 5

Правильное решение состоит не в том, чтобы вставлять стили в узлы, а в том, чтобы вместо этого связать ваши настройки стиля, специфичные для экрана, с классами CSS, которые влияют только на ваше представление экрана:

@media screen { .freeze { position: fixed; } } /* Display-only definition */

+

document.getElementById('foo').className = "freeze";

В качестве бонуса это также позволяет легко менять тонны стилей с помощью всего одной строки js, что также ускоряет и упрощает обслуживание.