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学习笔记一 之 数据类型
Dec 15 Javascript
JavaScript伸缩的菜单简单示例
Dec 03 Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
Mar 04 Javascript
浅谈vue+webpack项目调试方法步骤
Sep 11 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
Oct 11 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
JS制作简易计算器的实例代码
Jul 04 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数字格式化
2006/12/06 PHP
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
Python常用正则表达式符号浅析
2014/08/13 Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
python将list转为matrix的方法
2018/12/12 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
详解python tcp编程
2020/08/24 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
企业军训感言
2014/02/08 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
影视后期实训报告
2014/11/05 职场文书
写给医院的感谢信
2015/01/22 职场文书
运动会闭幕式主持词
2015/07/01 职场文书