jquery 打印没有CSS怎么解决?

html-css011

jquery 打印没有CSS怎么解决?,第1张

解决方法:要把css代码放入my_show里面,跟打印的内容放在一起,让jquery一起加载,才能生效。

具体操作:

一、添加打印样式

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.

jquery获取对象的css属性值的时候,就算我们没有给这个对象设置过css属性值,这些值也会存在,只不过有些是默认值。下面我们来输出一个div的css属性值,原始代码如下

<!DOCTYPE html>

<html>

<head>

    <title>DIV_TEST</title>

    <meta charset="utf-8"/>

    <style type="text/css">

        #top1{

        }

    </style>

</head>

<body>

    <div id="top1">

        <u>你好我是某某某</u>

    </div>

<script src="jquery-3.2.1.min.js" ></script>

    <script>

        $(document).ready(function(){

            console.log("float的值是:"+$("#top1").css("float"))

            console.log("height的值是:"+$("#top1").css("height"))

            console.log("overflow的值是:"+$("#top1").css("overflow"))

            console.log("color的值是:"+$("#top1").css("color"))

            console.log("big的值是:"+$("#top1").css("big"))

        })

    </script>

</body>

</html>

结果如下

可以看到我们没有设置过div的css属性,除了高度以外剩下的只要存在这个css属性的都是默认值,唯一不同的是最后一个big属性,我们知道这个属性不是css的属性,因此我们判断有没有某个属性的时候可以通过这个方式判断

$(document).ready(function(){

    console.log("是否存在big属性:"+testHasCss($("#top1"),"big"))

    console.log("是否存在color属性:"+testHasCss($("#top1"),"color"))

    console.log("是否存在display属性:"+testHasCss($("#top1"),"display"))

    console.log("是否存在gogo属性:"+testHasCss($("#top1"),"gogo"))

})

var testHasCss = function(obj,cssStr){

    if((obj).css(cssStr) === undefined){

        return false

    }else{

        return true

    }

}

结果如下

这个是jquery写的吧?jquery中大部分函数都是返回调用这个函数的对象,也就是说,$speech.css('fontSize')的返回值是$speech,所以你可以使用这样的调用队列:

$speech.css('fontSize').css("color","#fff")

jquery中的函数可以直接返回调用对象,方便你继续使用该对象。

而jquery中,一般来说,参数较少时,函数功能为获取属性;参数较多时,函数功能则为设置属性。以css函数为例,$speech.css('fontSize')是获取$speech这个节点的fontSize属性,而$speech.css('fontSize' ,num + 'px')则是将$speech的fontSize属性设置为num+'px'。它们的返回值还是$speech。