Вернитесь к исходному CSS CSS с помощью jQuery

Question

У меня есть страница с кнопкой «дружественный принтер», которая использует метод jQuery .css() для удаления некоторых фонов и границ из определенных элементов и изменения размера шрифта. Я могу установить другой метод .css(), чтобы изменить все так, как было, но есть ли простой способ вернуть все на странице в исходный CSS (кроме обновления страницы)?

Answer 1

Вы должны определить свои печати дружественных стили как правила селекторных в основном файле CSS

body.printfriendly .selector .rule 
{ 
    font-size:bigger; 
} 

И тогда вы можете добавить и удалить printfriendly класс по тегу тела, чтобы показать или скрыть правила.

Вы также можете использовать раздел @media print, чтобы объявлять правила, которые применяются только тогда, когда пользователь печатает.

@media print 
{ 
    .selector .rule 
    { 
    font-size:bigger; 
    } 
} 

Answer 2

Вы можете удалить все встроенные стили, делая что-то вроде

$('*[style]').removeAttr('style'); 

Это удалит все стили, заданные с помощью JQuery, но и потенциально любых других встроенных стилей, установленных в HTML. Не то, чтобы я рекомендую его.

Я понимаю, что вы, возможно, не захотите использовать лист стилей печати. Некоторые пользователи хотели бы распечатать страницу по своему усмотрению, и вы можете добавить предварительный просмотр перед фактической печатью.

Я рекомендую использовать класс .printfriendly, который можно переключить на тег body. Таким образом, вы полностью контролируете CSS и уровень представления.

Answer 3

Вы можете использовать .removeClass удалить класс, прикрепленной

.addClass('printFriendly'); 

.removeClass('printFriendly'); 

Answer 4

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

в шаблоне HTML:

<link href="/stylesheets/screen.css" media="screen" rel="stylesheet" type="text/css" /> 
<link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> 

в вашем print.css:

@import "screen.css"; 
// overwrite disired parts of your screen.css 

Теперь вы можете добавить кнопку со следующей командой яваскрипта:

document.print(); 

, чтобы открыть браузер по умолчанию print promt.

Answer 5

Удобная кнопка для принтера - довольно старая школа. CSS 2 имеет механизм media rule.

@media print { 
    /* style sheet for print goes here */ 
}