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 相关文章推荐
js loading加载效果实现代码
Nov 24 Javascript
Ext对基本类型的扩展 ext,extjs,format
Dec 25 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
Apr 27 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
May 29 Javascript
JQuery实现图片轮播效果
Sep 15 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
Javascript实现数组中的元素上下移动
Apr 28 Javascript
微信小程序开发之自定义tabBar的实现
Sep 06 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
微信小程序使用字体图标的方法
May 23 Javascript
layui原生表单验证的实例
Sep 09 Javascript
微信小程序聊天功能的示例代码
Jan 13 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接收App端发送文件流的方法
2016/09/23 PHP
php中final关键字用法分析
2016/12/07 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
浅谈javascript 面向对象编程
2009/10/28 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
jquery插件开发注意事项小结
2013/06/04 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
JS设置手机验证码60s等待实现代码
2017/06/14 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
js中的 || 与 && 运算符详解
2018/05/24 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
写好自荐信的技巧
2013/11/08 职场文书
高中生学习的自我评价
2013/12/14 职场文书
求职信写作要突出重点
2014/01/01 职场文书
医务工作者先进事迹材料
2014/01/26 职场文书
军训自我鉴定范文
2014/02/13 职场文书
暑期培训随笔感言
2014/03/10 职场文书
同意报考公务员证明
2015/06/17 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫