运用 media=”print” ——– javascript打印时的css样式的控制

例1(内联)

例子:下面的代码只会在打印时发挥作用,其他状态下无效

<style type="text/css" media="print">
th {
    background-color: 06f;
    border-right: 1px solid #95bce2;
    color: #fff;
    line-height: 20px;
    height: 30px;
}

td {
    padding: 6px 11px;
    border-bottom: 1px solid #95bce2;
    border-right: 1px solid #95bce2;
    vertical-align: top;
    text-align: center;
}

td * {
    padding: 6px 11px;
}

tr.alt td {
    background: #ecf6fc;
}

tr.over td {
    background: #bcd4ec;
}
</style>
注意:  当发现上面打印时的样式不起作用,可将<style></style>放置在打印的区域的范围里

例2(外联)

<link rel="stylesheet" href="*****/*****/printstylesheet.css" media="print" />

例3(import)

<style type="text/css">
      @import url("*****/*****/printstylesheet.css") print;
  </style>

更多推荐