Есть ли решение отключить изменения стиля Javascript при печати?

Question

Есть ли решение отключить изменения стиля Javascript при печати?

Например, если я что-то скрываю через Javascript, но хочу включить эту скрытую информацию в печать.

Я спрятал div с использованием Javascript и хочу показать, что div, если Javascript отключен. Теперь проблема в том, что div скрыт с помощью Javascript, он также не отображается при печати страницы.

Answer 1

Используйте таблицу стилей печати вместе с инструкциями !important, чтобы сделать элемент видимым для печати. ​​

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

CSS:

#myDiv { display: block!important; } 

Answer 2

Я нашел обходной путь (по крайней мере, он работает для меня). В моем случае у меня была базовая html-страница с некоторыми стилями (screen.css & print.css), а также немного javascript для постепенного улучшения страницы дополнительными функциями и т. Д.

Когда пришло время распечатать страницу, я понял, что js влияет на макет (так как я делал некоторые CSS-стили с помощью jquery).

То, что я в итоге сделал, это:

в "screen.css"

body {
    background-color: #ccc; /* or whatever colour your designer chose; if it NEEDS to be white, simply change something else (e.g. background-image, font-size, etc.) */
}

в "print.css"

body {
    background-color: #fff;
}

в "the-javascript-file.js"

$(document).ready(function()
{
    if (isPrinting() == false)
    {
        init();
    }
});

function isPrinting()
{
    var isPrint = false;
    /* I'm not 100% sure about the string literal check 'rgb(255, 255, 255)',
       should do some testing here with other values || other attributes...
       (font-size, color, line-height, other attributes that will have the 
       greatest difference / variation between "screen" and "print" styles)
    */
    if ($('body').css('background-color') == 'rgb(255, 255, 255)')
    {
        isPrint = true;
    }
    return isPrint;
}

function init()
{
    // All sorts of awesome goes here
}

И это было все! Это сработало!

Вот краткий обзор того, что происходит:

• Пользователь загружает страницу
• Браузер загружает "screen.css"
• Цвет фона тела установлен на "#ccc"
• Браузер загружает "the-javascript-file.js"
• JS проверяет цвет фона ... это "#ccc" ...
• JS делает свое дело
• Пользователь нажимает команду печати
• Браузер загружает «print.css»
• Цвет фона тела меняется на "#fff"
• Браузер загружает "the-javascript-file.js"
• JS проверяет цвет фона тела
• JS понимает, что цвет фона - "#fff"
• JS ничего не делает:)

Надеюсь, это поможет кому-то там:)

Answer 3

Использование !important уже упоминалось, но это тупой инструмент, и все становится очень сложно, как только вы начинаете нуждаться в переопределении вещей, которые уже !important.

Одним из больших преимуществ CSS является то, что он позволяет отделить стиль от структуры. Вместо использования JS для манипулирования стилем элемента, используйте его для манипулирования структурой . Например, манипулируя свойством className.

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

Это дает дополнительное преимущество: вам не нужно думать о необходимости переопределять эти стили, поскольку они не будут применяться в первую очередь (для печати).

Answer 4

Предлагаю вам взглянуть на эту статью: CSS Design: Going to Print .

Grz, Kris.