2014-11-07 2 views
0

У меня есть страница с 60 различными входами. Все они номера и должны быть проверены на одном из входов. Если этот вход больше 3, чем родительский div, он изменится на красный. Все работает прекрасно, если только я не пытаюсь напечатать стиль, который я передаю через функцию javascript (document.getElementById (classid) .style.backgroundColor = "red";) не отображает печать. Как получить страницу для печати со стилем, заданным функцией?Распечатать страницу с javascript styling

<script type="text/javascript"> 
function CheckThisNumber(val, id){ 
    var x = document.getElementById("a6").value; 
    var y = Number(x) +3; 
    var classid = "p" + id; 
    if((val)>=y) { 
    document.getElementById(classid).style.backgroundColor = "red"; } 
    else { document.getElementById(classid).style.backgroundColor = "white"; } 
} 
</script> 

Один из многих входов:

<div class="a1" id="pa1"> 
<strong>A1</strong><br><input type="number" name="a1" id="a1" style="width:95%" onKeyUp="CheckThisNumber(this.value,this.id)"> 
</div> 
+0

Поскольку ваш браузер/принтер настроен так, чтобы не печатать цвета фона. Не имеет никакого отношения к JavaScript/HTML и ничего, что может исправить JavaScript/CSS/HTML. Существует https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust, но он не является стандартным. – epascarello

+0

Хмм хорошо. Есть ли альтернатива фоновому цвету, который будет печатать? Работает ли пограничная работа или другой вариант, который даст аналогичный эффект? – Buster

ответ

1

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

Некоторый браузер поддерживает нестандартное CSS, чтобы заставить BG печатать

-webkit-print-color-adjust: exact 

информация: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust

И еще падение назад было бы использовать тень коробки

.redBG { box-shadow: inset 0 0 0 100px #FF0000; } 
.whiteBG { box-shadow: inset 0 0 0 100px #FFFFFF; } 

Если вы используете его на большом текстовом поле, вам может потребоваться установить значение 100px на гораздо большее значение.

+0

Oooooo ... что 'webkit-print-color-adjust' является опрятным. Я не знал этого. – somethinghere

Смежные вопросы