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 相关文章推荐
java、javascript实现附件下载示例
Aug 14 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
AngularJs 60分钟入门基础教程
Apr 03 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
Nov 10 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
Angularjs的启动过程分析
Jul 18 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 Javascript
jquery实现直播弹幕效果
Nov 28 jQuery
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
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
JavaScript 学习笔记(六)
2009/12/31 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
Jquery attr("checked") 返回checked或undefined 获取选中失效
2013/10/10 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
Js动态设置rem来实现移动端字体的自适应代码
2016/10/14 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
python+Django+apache的配置方法详解
2016/06/01 Python
Python pass详细介绍及实例代码
2016/11/24 Python
详解Python sys.argv使用方法
2019/05/10 Python
python async with和async for的使用
2019/06/20 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
C#面试问题
2016/07/29 面试题
材料物理专业大学毕业生求职信
2013/10/15 职场文书
快递业务员岗位职责
2014/01/06 职场文书
庆祝教师节主持词
2015/07/06 职场文书