jQuery CSS()方法改变现有的CSS样式

jQuery入门实例：使用CSS()方法改变现有的CSS样式表，css()方法在使用上具有多样性。其中有一种可接受两个输入参数：样式属性和样式值，两者之间用逗号分隔。比如要改变链接颜色，可以这样编写代码：

$("#61dh a").css('color','#123456');
//选择器‘$("#61dh a")'表示ID为‘#61dh'的元素下的所有链接。
//.css(‘color','#123456');表示把颜色设为'#123456'

如果需要改变多个样式属性，可先定义属性变量，然后直接赋值给css()方法。

var mycss = {
background: '#EEE',
width: '478px',
margin: '10px 0 0',
padding: '5px 10px',
border: '1px solid #CCC'
};
$("#result").css(divcss);

上述代码先定义了一个CSS样式属性变量“mycss”，类似于建立一个外部CSS文件，之后通过css()方法，把属性赋给ID为'#result'的DIV。

另外jQuery提供的css()方法还可以查看某个元素的css属性值。例如查看链接的颜色，代码如下：

$("#61dh a").css("color")

你会发现，这与第一个例子相似，但是这里只传递一个参数(样式属性)。

最后要介绍的是如何设置鼠标划过后的链接样式(比如: 颜色)，需要用到jQuery事件类方法 - hover()。值得注意的是，hover()方法需要定义两个函数，一个是鼠标划过时；另一个是鼠标划过后。具体方法如下：

$("#61dh a").css('color','#123456');
$("#61dh a").hover(function(){
$(this).css('color','#999');
},
function(){
$(this).css('color','#123456');
});
//hover()方法的两个函数使用用逗号分隔

或许聪明的你已经注意到这种方法称不上简洁，呵呵，其实jQuery hover()方法不是用来改变CSS样式的。在实际运用中，建议使用添加/移出CSS的方法来改变鼠标划过的链接样式。

赞 (0)

相关推荐

  • jquery中用函数来设置css样式

    jquery中用函数来设置css样式

    1.jquery语法 $(selector).css(name,function(index,value)) name:必需.规定 CSS 属性的名称 function(index,value) : 规定返回CSS属性新值的函数. index - 可选.接受选择器的index位置 value - 可选.接受CSS属性的当前值 2.function(index,value)的用途 相当于对通过选择符"selector"选择到的所有对象进行一次遍历,并设置相应的css属性值,其中index

  • 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()方法给指定元素同时设置多个样式的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $(

  • jquery设置css样式的多种方法(总结)

    设置css样式的多种方法总结,jquery <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> </style> </head> <body> <ul> <li>兄弟多个1</li&

  • jQuery toggle()设置CSS样式

    toggle() 切换元素的可见状态. 如果元素是可见的,切换为隐藏的:如果元素是隐藏的,切换为可见的. --------------------------------- 示例 切换所有段落的可见状态. HTML 代码: <p>Hello</p><p style="display: none">Hello Again</p> jQuery 代码: $("p").toggle() 结果: <p tyle=&quo

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

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

  • jQuery CSS()方法改变现有的CSS样式

    jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔.比如要改变链接颜色,可以这样编写代码: $("#61dh a").css('color','#123456'); //选择器'$("#61dh a")'表示ID为'#61dh'的元素下的所有链接. //.css('color','#123456');表示把颜色设为'#123456' 如果需要改变多个样式

  • jQuery CSS()方法改变现有的CSS样式表

    使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔.比如要改变链接颜色,可以这样编写代码: $("#61dh a").css('color','#123456'); //选择器'$("#61dh a")'表示ID为'#61dh'的元素下的所有链接. //.css('color','#123456');表示把颜色设为'#123456' 如果需要改变多个样式属性,可先定义属性变量

  • jQuery css() 方法动态修改CSS属性

    我们先来看个实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加和删除类</title> <style> div{width: 500px;height: 500px;background: #1c94c4;} button{width: 80px;height: 40px;margin

  • 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()方法用法.分享给大家供大家参考.具体分析如下: 此方法返回或设置匹配元素的一个或多个样式属性. 语法结构: 语法一: 取得指定样式属性的属性值. 以样式属性名称作为参数.例如: 复制代码 代码如下: $("div").css("color") 以上代码能够获取div的字体颜色值. 代码实例: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta c

  • javascript+css 网页每次加载不同样式的实现方法

    [明确需求] 网页加载样式表default.css,会展现默认风格.同时为实现多种风格,制作了skin1.css,skin2.css,skin3.css三种定制样式.如果在加载default.css后,再加载其中某一样式表,则会覆盖默认风格,展示新风格: 每次随机加载skin1.css.skin2.css.skin3.css,或者使用默认风格.需要注意的一点是,随机加载也有可能使这一次和上一次的样式相同. [实现思路] 使用document.write动态向<head />中写入css载入语句

  • jQuery HTML css()方法与css类实例详解

    本文实例讲述了jQuery HTML css()方法与css类.分享给大家供大家参考,具体如下: jQuery css() 方法 返回 CSS 属性 如需返回指定的 CSS 属性的值,请使用如下语法: css("propertyname"); 下面的例子将返回首个匹配元素的 background-color 值: $("p").css("background-color");//只获取 了一个背景颜色 //获取多个 <body> &l

  • JavaScript使用链式方法封装jQuery中CSS()方法示例

    本文实例讲述了JavaScript使用链式方法封装jQuery中CSS()方法.分享给大家供大家参考,具体如下: 主要思路就是:返回this对象,将所获取的操作元素放入一个数组中.在原型中添加拓展方法 <html> <head> <title></title> </head> <body> <div id="one">aa</div> </body> <script typ

  • jQuery的css() 方法使用指南

    定义和用法 css() 方法返回或设置匹配的元素的一个或多个样式属性. 返回 CSS 属性值 返回第一个匹配元素的 CSS 属性值. 注释:当用于返回一个值时,不支持简写的 CSS 属性(比如 "background" 和 "border"). 复制代码 代码如下: $(selector).css(name) name 必需.规定 CSS 属性的名称.该参数可包含任何 CSS 属性.比如 "color". 实例 取得第一个段落的 color 样式

随机推荐