JQuery结合CSS操作打印样式的方法

本节内容：
JQuery、CSS操作打印样式。

一、添加打印样式

1，为屏幕显示和打印分别准备一个css文件，如下所示：
  用于屏幕显示的css：

代码如下:

<link rel="stylesheet" href="css/mainstylesheet.css" media="screen" />

用于打印的css：

代码如下:

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

2，import方式：


代码如下:

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

3，直接把屏幕显示样式和打印样式写在一个css文件中：


代码如下:

@media print {}{
    h1 {
      color: black;
    }
    h2 {}{
      color: gray;
    }
  }

@media print里面的内容只对打印出来的内容有效，之外的内容就是屏幕显示的样式。

其他：
创建一个不指定媒体类型的样式表通常很有用（或者利用media="all"）。
当你准备好定义一些特别用于打印的规则时，可以只创建一个单独的样式表，使任何在打印时看起来不好的样式都失效。
使用这种方法的一个问题是必须确保打印机样式实际上确实覆盖了主样式表。可以使用！important.

二、打印样式注意事项：

1，打印样式中不推荐使用背景，因为浏览器默认情况下并不能打印出CSS中的背景内容，只有当浏览器被设置可以打印背景的情况下才能打印出背（ie的高级选项中可选）。
即使背景可以打印，它也可能盖过叠在它上面的任何文本。
  这是真的，尤其对于用彩色背景在显示器上强烈对比的文本，但是在黑白打印机上打印时会融合这一背景。
  background：none；去掉背景 图片和颜色。

可以利用background-color属性设置背景颜色为白色，像这样：background-color: white。
使用background的快捷法也可以获得相同的效果：background: white。因此像background: white;
这样的声明不仅设置了背景颜色为白色，而且消除了所有背景图片。利用这个background的快捷属性， 你实现了两个目的——设置了一个白色背景，并消除了图片——只用很少的代码。

2，如果需要在打印内容中出现图片，请在HTML代码中加入。

3，打印设置使用的是物理单位，所以尺寸最好不要用像素(px)，可以用pt也可以用cm；

4，隐藏不需要的或是次要的内容。display：none；

5，尽量不要让内容浮动，有些浏览器打印浮动的div的过程中，会有一个麻烦，需要特别加以注意。
不要在打印的样式表中浮动的块，像这样：float: none;。

例如，基于Gecko的浏览器 （例如Netscap 6+），当用户用它来浏览一个打印输出页面时，它会截去浮动元素中的内容。
这些内容就不会被传送到打印机，下一个页面也不会有它的踪影――它消失了。

6，尽可能的在HTML代码中做好内容重要的先后次序，这样在打印样式中可以节省不少的麻烦。

7，打印与网页不一样，打印一定要留下白边，单位用英寸(in)。

8，要确保页面上的所有文本以黑色打印，就用通配选择器（见第54页）和!important来创建把每个 标签都格式化为黑色文本的单个样式：

代码如下:

*{ color: ##000# !important }

9，在打印中显示链接url的信息：
利用一个高级的选择器：after和一个高级的CSS属性称作content，  把不在屏幕上显示的文本打印在一个样式元素的末端。

存在的问题：
after选择器和content属性技巧在Internet Explorer 6或更早的版本上不起作用（在IE 7上也不行）。
但是它在Firefox和Safari上的确可以，因此至少可以清楚地说明URL以便访问者可以使用他们的浏览器。

为了做到这点，给打印样式表添加一个样式，在每个链接后面打印出URL。你甚至可以添加其他文本项目比如圆括号，使它更好看些：
  a:after {content: " (" attr(href) ") ";}
   然而，这个CSS不区分外部或者内部的链接，因此它也打印出到达同一个网站其他页面的没用的相对文档链接：“访问主页（../../index. html）。”利用一点点CSS 3魔法，就可以强制这个样式只打印绝对的URL（即以http://开头的那些），像这样：

代码如下:

a[href^="http://"]:after {content: " (" attr(href) ") ";}

10，给打印添加分页符：两种被广泛认可的属性是page-break-before和page-break-after。
  page-break-before告诉网页浏览器在一个指定样式之前插入一个分页符。利用page-break-before属性使图片打印在一张新页面上，并且适合整张页面。
  要使一个元素作为打印页上的最后一个项目显示，就给那个元素的样式添加：
  page-break-after: always。

创建两个类样式，以类似于.break_after和.break_before的名字来命名，像这样：


代码如下:

.break_before { page-break-before: always; }
  .break_after { page-break-after: always; }

然后，可以选择性地把这些样式应用给应该打印在网页顶部或底部的元素。

三、测试打印样式
通常，不可能用打印机来进行测试，在IE浏览器菜单栏“文件”中有“打印预览”，可以通过这打印预览来做测试。

赞 (0)

相关推荐

  • jQuery使用手册之三 CSS操作

    jQuery使用手册之三 CSS操作

    传统javascript对css的操作相当繁琐,比如<div id="a" style="background:blue">css</div>取它的background语法是 document.getElementById("a").style.background,而jQuery对css更方便的操作,$("#a").background(),$("#a").background(&

  • jQuery 中关于CSS操作部分使用说明

    刚刚看了下jQuery的源代码,其中关于CSS及className的操作思想确实很不错,值得借鉴. 其中关于jQuery.className.has的定义部分,是用的正则来实现的,其实此处直接利用Javascript中String对象的indexOf方法来作处理的话,比用正则效率会更些,因此 复制代码 代码如下: jQuery.className.has的定义可以改进成:      has: function( t, c ) {        t = t.className || t;     

  • jQuery操作元素css样式的三种方法

    我们常常要使用Javascript来改变页面元素的样式.其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的:而jQuery里提供三种方法来实现这个功能,虽然它们和传统方法的思想相通,但是却节省了许多代码.还是那句话 - "jQuery让JavaScript代码变得简洁!" 1. addClass() - 添加CSS类 $("#target").addClass(&q

  • JQuery操作元素的css样式

    我们常常要使用Javascript来改变页面元素的样式.其中一种办法是改变页面元 素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的:而jQuery里提供三种方法来实现这个功能, 虽然它们和传统方法的思想相通,但是却节省了许多代码.还是那句 话 – "jQuery让JavaScript代码变得简洁!" 1. addClass() – 添加CSS类 复制代码 代码如下: $("#target"

  • jQuery学习笔记 操作jQuery对象 CSS处理

    CSS基本属性处理 方法 描述 css(name) 获取元素上CSS规则中name属性值 css(name,value) css(name,fn(index,value)) css({name1:value1,-,nameN:valueN}) 设置元素上CSS规则name属性的值为value,也可使用函数参数,不解释:还可以一次性为同一元素设置多个CSS属性 CSS尺寸属性处理 方法 描述 height() 获取元素CSS属性height的值 width() 获取元素CSS属性width的值.这

  • jQuery操作css样式

    jQuery操作css样式

    css操作的分类: css操作 位置操作 尺寸操作 css操作之css css代码: html代码: jQuery代码: 效果如下: css操作之位置操作 css代码: html代码 jQuery代码 效果如下: css操作之尺寸操作 css代码 html代码 jQuery代码 效果如下 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

  • 基于jquery animate操作css样式属性小结

    昨天突然有网友问我animate()方法可以来操作所有css属性吗?是的,我告诉他可以的.不过,在此有需要注意点需要大家搞清楚:当使用 animate()时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight而不是 margin-right,等等. css中的不是所有属性都可以用Jquery动画(animate函数)来动态改变,下面总结了JQ可以操作元素的一些属性: * backgroundPosi

  • jquery 操作css样式、位置、尺寸方法汇总

    一.CSS 1.css(name) 访问第一个匹配元素的样式属性. 返回值 String 参数 name (String) : 要访问的属性名称 示例: 复制代码 代码如下: $("p").css("color"); //取得第一个段落的color样式属性的值 2.css(properties) 把一个"名/值对"对象设置为所有匹配元素的样式属性.这是一种在所有匹配的元素上设置大量样式属性的最佳方式. 返回值 jQuery 参数 properti

  • JQuery中操作Css样式的方法

    复制代码 代码如下: //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr("class","divClass")设置Id为two的class属性. //2.追加样式 $("#two").addClass("divClass2")为ID为two的对象追加样式divClass2 //3.移除

  • JQuery结合CSS操作打印样式的方法

    本节内容:JQuery.CSS操作打印样式. 一.添加打印样式 1,为屏幕显示和打印分别准备一个css文件,如下所示:  用于屏幕显示的css: 复制代码 代码如下: <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" /> 用于打印的css: 复制代码 代码如下: <link rel="stylesheet" href=&q

  • webpack处理 css\less\sass 样式的方法

    webpack处理 css\less\sass 样式的方法

    本文介绍了webpack处理 css\less\sass 样式的方法,分享给大家,具体如下: (一)处理普通的.css 文件,需要安装 css-loader,style-loader .less 文件,需要安装 less-loader .sass 文件,需安装  less-loader npm install --save-dev css-loader npm install --save-dev css-loader npm install less-loader --save-dev (二)

  • jQuery修改CSS伪元素属性的方法

    CSS伪元素(pseudo elements)不是DOM元素,因此你无法直接选择到它们. 假设有如下HTML代码: <div class="techbrood" id="td_pseudo">techbrood introduction</div> 和CSS代码: .techbrood:before { width: 0; } 现在你想在某个元素的click事件中动态的把techbrood:before的width属性设置为100%, 有两个

  • jquery链式操作的正确使用方法

    糟糕的使用方法 复制代码 代码如下: $second.html(value);$second.on('click',function(){alert('hello everybody');});$second.fadeIn('slow');$second.animate({height:'120px'},500); 建议使用方法 复制代码 代码如下: $second.html(value);$second.on('click',function(){alert('hello everybody'

  • 基于jQuery UI CSS Framework开发Widget的经验

    jQuery UI中两大核心的css文件是ui.core.css和ui.theme.css.这两个css样式贯穿整个基于jQuery ui的界面上,并且可以通过jQuery ui ThemeRoller来生成自己的样式. .ui-helper-hidden :为元素应用display:none .ui-helper-hidden-accessible:将元素的绝对位置设置为不可见 .ui-helper-clearfix:适用于浮动包裹父元素的属性 . ui-helper-zfix:适用于修复if

  • jQuery基于ajax操作json数据简单示例

    本文实例讲述了jQuery基于ajax操作json数据的方法.分享给大家供大家参考,具体如下: jQuery Ajax 实例演示 jQuery Ajax 的三种格式,在与后台进行数据交互的时候可以是json格式也可以是xml格式,本人建议将数据转化成json格式. Xml与json的比较 1.可读性 JSON和XML的可读性可谓不相上下,一边是建议的语法,一边是规范的标签形式,很难分出胜负. 2.可扩展性 XML天生有很好的扩展性,JSON当然也有,没有什么是XML能扩展,JSON不能的. 3.

  • jquery结合css实现返回顶部功能

    css操作 CSS $("").css(name|pro|[,val|fn]) 位置 $("").offset([coordinates]) $("").position() $("").scrollTop([val]) $("").scrollLeft([val]) 尺寸 $("").height([val|fn]) $("").width([val|fn]) $(

  • jquery实现动态改变css样式的方法分析

    本文实例讲述了jquery实现动态改变css样式的方法.分享给大家供大家参考,具体如下: jquery 几乎成了现在开发WEB应用的标准JS库,这与其简单性和易用性是分不开的.作为一个后端开发人员,要做一些前端页面时,CSS 样式的控制是少不了需要掌握的.如果是静态的CSS,当然是可以直接写上去的,但有些界面是需要一些动态效果的,比如颜色变化,字体大小变化,甚至DIV 的隐藏于现实等,这些都需要用javascript 动态控制其CSS样式,下面就常用的jquery 控制 css 样式的方法做一个

  • Jquery使用css方法改变样式实例

    本文实例讲述了Jquery使用css方法改变样式.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • jQuery使用CSS()方法给指定元素同时设置多个样式

    本文实例讲述了jQuery使用CSS()方法给指定元素同时设置多个样式的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $(

随机推荐