function updatePatientRowHeight(patientsPerPage) {
// first get the CSS rule
// @media print { .patient-row { height: ... } }
// This we will change based on the number of patients per row
// I am just going to hardcode the total height to 9.75in for now
// Maybe in the future we might target different paper sizes/orientations
// In that case this would be need to changed
var styles = document.styleSheets[0];
var rules = styles.cssRules; // not available in some older IE browsers
var printRules = false;
if (rules) {
// loop through the rules until we find a CSSMediaRule
for (var i = 0; i < rules.length; i++) {
if (rules[i] instanceof CSSMediaRule) {
// now determine if it is @media print { }
if (rules[i].cssText.match(/^@media print /)) {
printRules = rules[i].cssRules;
break;
}
}
}
}
// if we found printRules above...
if (printRules) {
// loop through these rules looking for .patient-row rule
for (var i = 0; i < printRules.length; i++) {
if (printRules[i].selectorText == ".patient-row") {
// we found it. now let's update the height, finally
// let's calculate a new height in inches
// The total height allowed for patient rows is going to be
// hardcoded to 9.75ins for now
var totalHeight = 9.75
var heightPerRow = totalHeight / patientsPerPage;
log(printRules[i].style.height);
printRules[i].style.height = String(heightPerRow) + "in";
break;
}
}
}
}
我的CSS看起来像这样:
@media print {
.patient-row { height: 0.61in; }
}
此代码在最新的Chrome中运行良好,IE9能够在设置时找到并记录正确的高度。但是,当我选择打印预览或打印IE9时不会应用新样式。相反,它采用默认值。