有关运用JQ为CSS添加样式

html-css024

有关运用JQ为CSS添加样式,第1张

JQ为CSS添加样式,可以使用jQuery CSS 操作 的css() 方法

定义和用法

css() 方法返回或设置匹配的元素的一个或多个样式属性。

设置 CSS 属性

设置所有匹配元素的指定 CSS 属性。

    $(selector).css(name,value)

实例

/*将所有段落的颜色设为红色:*/

$("p").css("color","red")

设置多个 CSS 属性/值对

$(selector).css({property:value, property:value, ...})

把“名/值对”对象设置为所有匹配元素的样式属性。

这是一种在所有匹配的元素上设置大量样式属性的最佳方式。

实例

实例

$("p").css({

  "color":"white",

  "background-color":"#98bf21",

  "font-family":"Arial",

  "font-size":"20px",

  "padding":"5px"

  })

也可以通过Jquery 属性操作的removeClass、addClass方法移除元素类名或者添加元素类名的方式达到修改元素样式的效果。详细内容可以百度“jQuery 参考手册 - 属性操作”

解决方法:要把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.