Может ли jQuery изменить CSS для определенного типа медиа?

Question

Возможно ли для jQuery изменить CSS для определенного типа носителя (например, печати)?

Моя конкретная проблема заключается в том, что я использую animate для элемента, и он переопределяет таблицу стилей печати, что разрушает мой макет печати. Хотя моя проблема немного отличается от общего вопроса, я думаю, что ответ должен помочь мне решить мою проблему. Любые возможные обходные пути также будут полезны. Очень благодарен.

Answer 1

Вам не нужно делать это с Javascript. Просто используйте правило @media в вашем документе CSS. Вы можете написать все эти вещи только в одном файле CSS. Вот конкретная W3C документация

@media screen {

/* all your fancy screen css with a bunch of animation stuff*/

}

@media print {

/* all your fancy print css just plain */

}

Вы можете написать очень конкретные объявления и сопоставить все элементы с вашими потребностями. Между прочим, поддерживается до IE6 . Работает как шарм в наших проектах.

@media print {
   body { font-size: 10pt }
}

@media screen {
   body { font-size: 13px }
}

@media screen, print {
   body { line-height: 1.2 }
}

Answer 2

Добавьте CSS для вашего носителя (печати) с определенным правилом, которое скрывает элемент (например, #div {display: none;})

В вашем скрипте, если это:

$('#div').is(':visible')

верно, значит, вы находитесь на печатном носителе (печать).