Greasemonkey como aplicar uma regra CSS apenas para impressão @media?
-
18-09-2019 - |
Pergunta
Eu estou usando o método Greasemonkey e JQuerys #css para adicionar estilos CSS para uma página. Script até agora:
// ==UserScript==
// @name www.al-anon.dk Remove inline scroll so that page content prints properly
// @namespace http://userscripts.org/users/103819
// @description remove scroll from al-anon pages
// @include http://al-anon.dk/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// ==/UserScript==
$('#framen').css({'height': 'auto', width: 'auto'});
$('#menu').css({ 'display': 'none'});
Agora, a minha pergunta é como faço para aplicar a última regra apenas para impressão @media?
Em outras palavras: Se isso fosse CSS limpo eu usaria a seguinte sintaxe:
@media print {
/* style sheet for print goes here */
}
Mas como optain isso com Greasemonkey / JQuery
Solução
Você pode adicionar um elemento de estilo em vez disso:
$('<style media="print">#menu {display: none;}</style>').appendTo('head');
Outras dicas
GM_addStyle('@media print { #menu { display:none; } }');
Além disso, se você quiser que seu script para ser executado em outros navegadores.
/**
* Define GM_addStyle function if one doesn't exist
*/
if( typeof GM_addStyle != 'function' )
function GM_addStyle(css)
{
var style = document.createElement('style');
style.innerHTML = css;
style.type='text/css';
document.getElementsByTagName('head')[0].appendChild(style);
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow