Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá,
Criei uma function para alterar o href de um arquivo css para impressão, tenho 3 botões e cada um carrega um css print diferente, o problema é que se eu adicionar o windows.print(); logo após a alteração do href o css não funciona mas se eu pressionar as teclas de atalho do windows Ctrl+p funciona, segue code:
function printPg(alvo){
var link = document.querySelector('#cssPrint');
link.setAttribute('href', '/app/css/'+alvo+'.css');
window.print();
}
<link rel="stylesheet" type="text/css" media="print" href="/app/css/default.css" id="cssPrint">
Obrigado.Não funcionou nenhuma das alternativas.
Parece que o js muda o link / inclui o elemento mas não aplica o css, porém funciona no atalho (CTRL + p)!
Enfim vou mudar o método e imprimir a div, assim aplico o css específico para impressão nas respectivas divs, mais simples, segue para quem precisar:
function printPg(alvo){
var alvo = $('#'+alvo).html();
printOut = window.open('about:blank');
printOut.document.write(alvo);
printOut.window.print();
printOut.window.close();
}
Obrigado.<style>
body {
font-family: Helvetica;
color: rgb(85, 85, 85);
}/ backgroud color /
h1 {
font-size: 24px;
font-weight: normal;
margin: 0.4em 0;
}
.container {
width: 100%;
margin: 0 auto;
}.container .row {
float: left;
clear: both;
width: 100%;
}.container .col {
float: left;
margin: 0 0 1.2em;
padding-right: 1.2em;
padding-left: 1.2em;
}.container .col.twelve {
width: 100%;
}@media screen and (min-width: 200px) {
.container {
width: 50%;
max-width: 1080px;
margin: 0 auto;
}
.container .row {
width: 100%;
float: left;
clear: both;
}
.container .col {
float: left;
margin: 0 0 1em;
padding-right: .5em;
padding-left: .5em;
}
.container .col.four {
width: 50%;
}
.container .col.tweleve {
width: 100%;
}
}* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}a {
text-decoration: none;
}
.btnOn {
font-size: 20px;
white-space: nowrap;
width: 100%;
padding: .8em 1.5em;
font-family: Helvetica;
line-height: 20px;
display: inline-block;
zoom: 1;
color: rgb(255, 255, 255);
text-align: center;
position: relative;
-webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
transition: border .25s linear, color .25s linear, background-color .25s linear;
}.btnOn.btn-sea {
background-color: rgb(15, 219, 0);
border-color: rgb(10, 145, 0);
-webkit-box-shadow: 0 3px 0 rgb(10, 145, 0);
box-shadow: 0 3px 0 rgb(10, 145, 0);
}.btnOn.btn-sea: hover {
background-color: rgb(10, 145, 0);
}.btnOn.btn-sea: active {
top: 3px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.btnOff {
font-size: 20px;
white-space: nowrap;
width: 100%;
padding: .8em 1.5em;
font-family: Helvetica;
line-height: 20px;
display: inline-block;
zoom: 1;
color: rgb(255, 255, 255);
text-align: center;
position: relative;
-webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
transition: border .25s linear, color .25s linear, background-color .25s linear;
}.btnOff.btn-sea {
background-color: rgb(255, 42, 42);
border-color: rgb(204, 0, 0);
-webkit-box-shadow: 0 3px 0 rgb(204, 0, 0);
box-shadow: 0 3px 0 rgb(204, 0, 0);
}.btnOff.btn-sea: hover {
background-color: rgb(204, 0, 0;
}.btnOff.btn-sea: active {
top: 3px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
</style>
<script type="text/javascript">
function changeStatus (el) {
var isOn = el.innerHTML == "ON";
el.className = 'btn-sea ' + (isOn ? "btnOff" : "btnOn");
el.innerHTML = isOn ? "OFF" : "ON";
}
</script>
<div class='container'>
<div class='row'>
<div class='col twelve'>
<p align='center'>
<font size='10'>REMOTE CONTROL</font>
</p>
</div>
</div>
<div class='row'>
<div class='col four'>
<a href='javascript:void(0)' onclick="changeStatus(this)" class='btnOn btn-sea'>ON</a>
</div>
</div>
<div class='col twelve'> </div>
</div>
[Veja aqui](https://output.jsbin.com/tipureg)
Tenta usar o comando print no css, então você dispensa alterar um elemento na header.
Ele é justamente para personalizar quando a impressão é acionada
@media print {
/ suas definições /
}
Também não sei se vai funcionar no seu caso, mas não custa tentar, ao invés de substituir o css, crie uma nova tag link na header com o javasript e adicione o css desejado então, nesse css contendo as definições personalizadas na teoria irá sobrescrever quaisquer css já carregado.