jQuery 改变CSS样式基础代码

我叫戴丽娜

我叫戴丽娜

2016-02-19 13:45

清醒时做事,糊涂时读书,大怒时睡觉,无聊时关注图老师为大家准备的精彩内容。下面为大家推荐jQuery 改变CSS样式基础代码,无聊中的都看过来。
其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开。比如我们要改变链接颜色,我们可以使用下面的代码:

代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
$("#61dh a").css('color','#123456');
//这里选择器‘$("#61dh a")'表示ID为‘#61dh'的元素下的所有链接。
//.css(‘color','#123456');表示把颜色设为'#123456'

如果我们需要改变多个样式属性,我们可以先定义属性变量,然后直接赋值给css()方法。示例如下:

代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
var divcss = {
background: '#EEE',
width: '478px',
margin: '10px 0 0',
padding: '5px 10px',
border: '1px solid #CCC'
};
$("#result").css(divcss);
//这里我们先定义了一个CSS样式属性变量‘divcss',这类似于建立一个外部CSS文件。
//然后通过jQuery提供的css()方法,把属性赋给ID为'#result'的DIV。

另外jQuery提供的css()方法还可以用来查看某个元素的css属性值。例如,我们想查看链接的颜色,可以使用下面的代码:

代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
$("#61dh a").css("color")
//和第一个例子相似,但是这里我们只传递一个参数(样式属性)

最后要介绍的是如何设置鼠标划过后的链接样式(比如: 颜色)。我们无法使用选择器直接选择鼠标划过状态下的链接,也就是说$("a:hover")是不成立的。因此我们需要用到jQuery提供的事件类方法 - hover()。值得注意的是,hover()方法需要定义两个函数,一个是鼠标划过时;另一个是鼠标划过后。具体方法如下:

代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
$("#61dh a").css('color','#123456');
$("#61dh a").hover(function(){
$(this).css('color','#999');
},
function(){
$(this).css('color','#123456');
});
//hover()方法的两个函数使用用逗号分隔

你或许注意到这种方法一点都不简洁(违背了jQuery的宗旨),
其实jQuery提供的hover()方法不是用来改变CSS样式的。在实际运用中,建议使用添加/移出CSS的方法来改变鼠标划过的链接样式。
展开更多 50%)
分享

猜你喜欢

jQuery 改变CSS样式基础代码

Web开发
jQuery 改变CSS样式基础代码

jQuery toggle()设置CSS样式

Web开发
jQuery toggle()设置CSS样式

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

JQuery CSS样式控制 学习笔记

Web开发
JQuery CSS样式控制 学习笔记

巧用CSS改变鼠标的样式

Web开发
巧用CSS改变鼠标的样式

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

巧妙运用CSS样式表立刻改变鼠标的样式

Web开发
巧妙运用CSS样式表立刻改变鼠标的样式

巧妙运用CSS立刻改变鼠标的样式

Web开发
巧妙运用CSS立刻改变鼠标的样式

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

jQuery中与toggleClass等价的程序段 以及未来学习的方向

jQuery中与toggleClass等价的程序段 以及未来学习的方向

合理设置虚拟内存,提升Win8.1流畅度

合理设置虚拟内存,提升Win8.1流畅度
下拉加载更多内容 ↓