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循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
Javascript核心读书有感之类型、值和变量
Feb 11 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 Javascript
koa-passport实现本地验证的方法示例
Feb 20 Javascript
7个你应该知道的JS原生错误类型
Apr 29 Javascript
js作用域及作用域链工作引擎
Jul 07 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
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
PHP文件下载类
2006/12/06 PHP
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
php中的依赖注入实例详解
2019/08/14 PHP
laravel5.6实现数值转换
2019/10/23 PHP
javascript iframe编程相关代码
2009/12/28 Javascript
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
Input文本框随着输入内容多少自动延伸的实现
2017/02/15 Javascript
Vue.js实现实例搜索应用功能详细代码
2017/08/24 Javascript
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
scrapy爬虫完整实例
2018/01/25 Python
python爬虫面试宝典(常见问题)
2018/03/02 Python
多个应用共存的Django配置方法
2018/05/30 Python
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
教师自荐信
2013/12/10 职场文书
婚纱摄影师求职信
2014/03/07 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
品酒会策划方案
2014/05/26 职场文书
汽车维修求职信
2014/06/15 职场文书
节约用水的口号
2014/06/20 职场文书
实习证明模板
2015/06/16 职场文书
Python实现的扫码工具居然这么好用!
2021/06/07 Python