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代码
Mar 05 Javascript
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
Dec 23 Javascript
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
JS实现给json数组动态赋值的方法示例
Mar 19 Javascript
js中async函数结合promise的小案例浅析
Apr 14 Javascript
浅谈TypeScript 索引签名的理解
Oct 16 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
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
关于js数组去重的问题小结
2014/01/24 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
Vue+Django项目部署详解
2019/05/30 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
JS实现京东商品分类侧边栏
2020/12/11 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
python中随机函数random用法实例
2015/04/30 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
Python xlwt模块使用代码实例
2020/06/10 Python
servlet面试题
2012/08/20 面试题
共产党员承诺书
2014/03/25 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
诚信考试倡议书
2014/04/15 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
英文感谢信范文
2015/01/21 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
会计主管竞聘书
2015/09/15 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
创业计划书之废品回收
2019/09/26 职场文书
Mysql中 unique列插入重复值该怎么解决呢
2021/05/26 MySQL
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android
java项目构建Gradle的使用教程
2022/03/24 Java/Android
Java实现注册登录跳转
2022/06/16 Java/Android
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技
React更新渲染原理深入分析
2022/12/24 Javascript