jQuery 改变CSS样式基础代码


Posted in Javascript onFebruary 11, 2010

其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开。比如我们要改变链接颜色,我们可以使用下面的代码:

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

如果我们需要改变多个样式属性,我们可以先定义属性变量,然后直接赋值给css()方法。示例如下:
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属性值。例如,我们想查看链接的颜色,可以使用下面的代码:
$("#61dh a").css("color") 
//和第一个例子相似,但是这里我们只传递一个参数(样式属性)

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

你或许注意到这种方法一点都不简洁(违背了jQuery的宗旨),
其实jQuery提供的hover()方法不是用来改变CSS样式的。在实际运用中,建议使用添加/移出CSS的方法来改变鼠标划过的链接样式。
Javascript 相关文章推荐
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
ExtJs3.0中Store添加 baseParams 的Bug
Mar 10 Javascript
node.js实现快速截图
Aug 27 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 Javascript
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
vue.js 实现a标签href里添加参数
Nov 12 Javascript
jQuery 添加/移除CSS类实现代码
Feb 11 #Javascript
JavaScript Event学习补遗 addEventSimple
Feb 11 #Javascript
JavaScript 输入框内容格式验证代码
Feb 11 #Javascript
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 #Javascript
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 #Javascript
一段实现页面上的图片延时加载的js代码
Feb 11 #Javascript
JavaScript Event学习第十一章 按键的检测
Feb 10 #Javascript
You might like
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
用js怎么把&字符换成"&amp:"
2006/10/19 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
原生JavaScript编写俄罗斯方块
2015/03/30 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
python计算对角线有理函数插值的方法
2015/05/07 Python
Python中特殊函数集锦
2015/07/27 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
Python小进度条显示代码
2019/03/05 Python
python pillow模块使用方法详解
2019/08/30 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
python列表推导式操作解析
2019/11/26 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
Python matplotlib实时画图案例
2020/04/23 Python
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
销售经理工作职责
2014/02/03 职场文书
趣味比赛活动方案
2014/02/15 职场文书
推普周活动总结
2014/08/28 职场文书
医院党员公开承诺书
2014/08/30 职场文书
会计学习心得体会
2014/09/09 职场文书
五好家庭申报材料
2014/12/20 职场文书
刑事撤诉申请书
2015/05/18 职场文书
微信搭讪开场白
2015/05/28 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫