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 相关文章推荐
javascript html 静态页面传参数
Apr 10 Javascript
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
javascript将url中的参数加密解密代码
Nov 17 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
js仿百度音乐全选操作
Jan 13 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
Mar 20 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 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/08/07 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
Bootstrap基础学习
2015/06/16 Javascript
js严格模式总结(分享)
2016/08/22 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
Three.js基础部分学习
2017/01/08 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
python 控制语句
2011/11/03 Python
在CentOS6上安装Python2.7的解决方法
2018/01/09 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
英国最大的自有市场,比亚马逊便宜:Flubit
2019/03/19 全球购物
小学生保护环境倡议书
2014/05/15 职场文书
销售团队获奖感言
2014/08/14 职场文书
2014年班组工作总结
2014/11/20 职场文书
学生自我评语
2015/01/04 职场文书
关于幸福的感言
2015/08/03 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
教师个人教学反思
2016/02/23 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL
变长双向rnn的正确使用姿势教学
2021/05/31 Python